CODEWITHSUNDEEP
javascriptreactjspopoverreactstrap
ganesh kaspate
ganesh kaspate

Reputation: 2685

How to use reactstrap popover on hover?

I am new to the react . Here I am using a library called reactstrap, In which ,

import React from 'react';
import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      popoverOpen: false
    };
  }

  toggle() {
    this.setState({
      popoverOpen: !this.state.popoverOpen
    });
  }

  render() {
    return (
      <div>
        <Button id="Popover1" type="button">
          Launch Popover
        </Button>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
          <PopoverHeader>Popover Title</PopoverHeader>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover>
      </div>
    );
  }
}

Now, Here what I am trying is when user hover on that button itself then only user should be able to see that popover. SO is there any way through which we can use this on hover itself ?

Upvotes: 4

Views: 9321

Answers (2)

Sandeep Jain
Sandeep Jain

Reputation: 1262

Without Reactstrap using Material UI of ReactJS
Calling rowHover method :
    rowHover= (event) => {
        const rowId = event.currentTarget?.dataset?.id;
        console.log(rowId);
        this.state.popRowData = rowId;
        this.setState({ popRowData: rowId });
        this.state.anchorE1 = true;
        this.state.open = true;
      };
    
On Mouse event
                          onMouseEnter: this.rowHover, // <------- Here
                          onMouseLeave: this.handlePopoverClose
    Popover called : 
        <Popover
                id="mouse-over-popover"
                sx={{
                  pointerEvents: 'none',
                }}
                open={this.state.open}
                anchorEl={this.state.anchorE1}
                anchorOrigin={{
                  vertical: 'bottom',
                  horizontal: 'center',
                }}
                transformOrigin={{
                  vertical: 'center',
                  horizontal: 'center',
                }}
                onClose={this.handlePopoverClose}
                disableRestoreFocus
              >
                <Typography sx={{ p: 1 }}>{this.state.popRowData}</Typography>
              </Popover>

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20755

For this, you can use the onMouseEnter and onMouseLeave events:

<Button
   id="Popover1"
   type="button"
   onMouseEnter={this.onHover}
   onMouseLeave={this.onHoverLeave}
>
    Launch Popover
</Button>

And the methods should look like:

onHover() {
  this.setState({
    popoverOpen: true,
  })
}

onHoverLeave() {
  this.setState({
    popoverOpen: false,
  })
}

Demo

Upvotes: 11

Related Questions