'How do have modal pop up when hovering over bootstrap 5 card?

I was following a template I found online to have a modal pop up when hovering over my cards with bootstrap 5.

This is my code so far:

class SavedEpisodes extends Component {
  
  $(function() {

    $('[data-toggle="modal"]').hover(function() {
      var modalId = $(this).data('target');
      $(modalId).modal('show');
  
    });
  
  });
  render() {
    const { userId, savedEpisodes, deleteSavedEpisode } = this.props;
    console.log(savedEpisodes, "saved episodes-----");

    return (
      <>
        <h1>Saved Episodes:</h1>
       

        <div className="row p-5 m-2">
          {savedEpisodes?.map((saved) => {
            return (
              <div className="col-md-2" key={saved.episode.id}>
                <div
                  className="card"
                  data-toggle="modal"
                  data-target="#basicExampleModal"
                >
                 
                  <img
                    src={saved.episode.images[1].url}
                    alt="podcastimg"
                    className="card-img-top"
                  />
                  <div className="card-body">
                    <h5 className="card-title" style={{ textAlign: "center" }}>
                      <Link
                        to={`/episode/${saved.episode.id}`}
                        className="stretched-link"
                      >
                        <span style={{ fontWeight: "bold", color: "white" }}>
                          {saved.episode.name}
                        </span>
                      </Link>
                    </h5>
                  </div>
                </div>
              </div>
            );
          })}
          <div
            className="modal fade"
            id="basicExampleModal"
            tabIndex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title" id="exampleModalLabel">
                    Modal title
                  </h5>
                  <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal"
                  >
                    Close
                  </button>
                  <button type="button" class="btn btn-primary">
                    Save changes
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

I never used jQuery before so I'm not sure where to put that function for hovering, inside my class or not. I also tried to remove the $ because I was getting an error but that didn't seem to fix it either.

How do I get a modal to pop up only when hovering over my cards?

Thanks in advance!

javascripthtmlcssreactjsbootstrap-5


Solution 1:[1]

This way of coding is not correct.React js is completely different from jquery

You can use React-bootstrap if you want to use bootstrap in react component. On the other hand, Modal should triggered with click event.you should use popover,tooltip,.. which hovered on cart element.

This resources can help you:

https://react-bootstrap.netlify.app/components/overlays/

https://react-bootstrap.netlify.app/components/modal/

If you do not want to use external libraries, you can use portal in react:

https://reactjs.org/docs/portals.html

Solution 2:[2]

This is not so react way. I would recommend to you using states and control your modal with this state. You can use onMouseEnter event and can set your boolean state inside. Also you should set your state again in onClick event of button to close modal

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mona Rezvani
Solution 2 Evren

Related Questions