Estoy haciendo un evento con el mouse sobre un ícono que básicamente muestra una casilla de verificación. Intenté hacer un popover con el atributo de contenido de datos, pero no funcionó cuando intenté reemplazar la etiqueta a con la etiqueta de entrada.
<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="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">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);});
<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>Debe incluir popover.js para activar la ventana emergente