Hello. There is such HTML:

<img src="/img.png" onmouseout="Hide()" onmouseover="Show()" tooltip data-placement="bottom" data-title="Tooltip on right" alt="lol" class="img-thumbnail navbar-left" style="padding: 2px; width: 40px; height: 40px;">

There is such a JS:

 function Hide() { $("[tooltip]").tooltip('hide'); } function Show() { $("[tooltip]").tooltip('show'); }

How to make a script so as not to hide the tooltip while the mouse is pointing at it? (On the tool itself, and not on the object called by it).

Actually for this and made the event guidance and loss of guidance in a separate function. But I have no idea how to extend it to the tooltip itself .. Any thoughts?

    1 answer 1

    Good day!

    We did a popover in our project and if it doesn’t work (although it’s almost the same) you can take the idea. A working example can be found here. So:

    HTML:

     <div style="height:200px;"></div> <a href="#" id="element">Это ссылка</a> <div id="regionPopContent" style="display:none;"> <div class="tooltip-arrow"></div> <div class="tooltip-inner">Ура!</div> </div>

    Js:

     $("#element").popover({ trigger: "manual", html: true, content: $('#regionPopContent').html() }) .on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide") } }, 100); });

    CSS:

     .tooltip-inner{ background-color: transparent !important; color: #000; }

    Hope this helps you.