Estoy tratando de aplicar el evento mouseover en un botón, de modo que cuando coloca el mouse sobre un botón, muestra un html simple donde puede hacer clic en un botón o marcar las casillas de verificación. Sin embargo, cuando intenté agregar estas etiquetas dentro del atributo de datos, no mostró ningún contenido. ¿Estoy usando la función de forma incorrecta?
<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.<button name='button' type='button'>click</button>" </button></label> $("#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);});
Tu código funciona bien. prueba esto.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <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.<button name='button' type='button'>click</button>" </button></label> <script language="javascript"> //$( document ).ready(function() { $(function() { $("#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); }); }) </script>