Can't make tooltop tooltips. http://getbootstrap.com/javascript/#tooltips-examples

I use Bootstrap from this site. Who can help with the code, write the correct link and script code so that everything works?

    3 answers 3

    Good afternoon, just answered a similar question, look here Do not close the tooltip while the mouse is pointing at it? (Bootstrap) Or See a fully working example here

    If you are interested in the full code of the page, then it is here:

    <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jsFiddle demo by pvkovalev</title> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style type="text/css"> .tooltip-inner{ background-color: transparent !important; color: #000; } </style> </head> <body> <div style="height:200px;"></div> <a href="#" id="element" data-original-title="" title="">Это ссылка</a> <div id="regionPopContent" style="display:none;"> <div class="tooltip-arrow"></div> <div class="tooltip-inner">Ура!</div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript"> $(window).load(function(){ $("#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); }); }); </script> </body> </html>

    Hope this helps you.

      In the object over which you see a hint you write:

       data-toggle="tooltip" data-placement="top" title="Tooltip on top"

      Between the tags <head></head> Write the initialization function

       $(function(){ $('[data-toggle="tooltip"]').tooltip(); });

      In the end, you should get something like:

       <!doctype html> <html> <head> <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </head> <body> <span data-toggle="tooltip" data-placement="top" title="Tooltip on top">Всплывающая подсказка</span> </body> </html>

        In the object where you want to use the tooltip, write the tooltip attribute. And in the head write this code:

         < script type="text/javascript"> $(function () { $("[tooltip]").tooltip(); }); </ script>