After coming across a handy template online, I decided to implement a modal pop-up feature when hovering over cards using Bootstrap 5. Here's what I have 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">×</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>
</>
);
}
}
As someone unfamiliar with jQuery, you might be unsure of where to place the hover function in your code - should it go inside the class or elsewhere? Also, removing the dollar sign may have caused an error that persists despite your efforts. Can anyone provide guidance on how to activate the modal only upon card hovering?
Your help would be greatly appreciated!