How to get div id using mouseover to show popover?

Question

Suppose, I've many div. Now I want to show separate popover, div wise. I used mouseover. It's working well. But 1st time not working. When I moved the mouse 2nd time, it's working.

Here is my code:

 $(document).ready(function() { $(".popper").one('mousemove', function() { var messageId = this.id; console.log(messageId); $("#" + messageId).popover({ placement: 'bottom', container: 'body', html: true, content: function() { return $('.popper-content-' + messageId).html(); } }); }); });

 body { padding: 10px 120px; } .red { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div> <div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div> <div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div> <div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>

How do I show the popover first time also?

Please help.

Thanks in advance!

Answer 1

You have to hover first and show the popover() manually since you're building it later.

.popover('show');

Example snippet

 $(document).ready(function() { $(".popper").one('mousemove', function() { var messageId = this.id; console.log(messageId); $("#" + messageId).popover({ placement: 'bottom', container: 'body', html: true, content: function() { return $('.popper-content-' + messageId).html(); } }).popover('show'); }); });

 body { padding: 10px 120px; } .red { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a> <div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div> <div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div> <div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div> <div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>