'How to make popover (mouse over) on a button?

I'm making an mouse over event over on an icon which bascially shows a checkbox. I tried making a popover with the data-content attribute, but it didn't work with when I tried replacing the a tag with input tag.

<div class="form-group col-2" >
    <label for="form-realname" class="d-flex align-items-center">test<button class="fa fa-info-circle ms-auto" aria-hidden="true" id="pop" data-html="true" data-content="The message is here.
    <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>" ></button></label>
</div>


<script>
$("#pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
    let content = this;
    $(content).popover("show");
    $(".popover").on("mouseleave", function () {
        $(content).popover('hide');
    });
}).on("mouseleave", function () {
let content = this;
setTimeout(function () {
    if (!$(".popover:hover").length) {
        $(content).popover("hide");
    }
}, 300);

});

javascripthtml


Solution 1:[1]

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
<script>$(document).ready(function(){$('[data-toggle="popover"]').popover();});</script>

You Must Include popover.js for Activate The popup

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 Lucifer

Related Questions