1

Не могу сделать всплывающие подсказки tooltop. http://getbootstrap.com/javascript/#tooltips-examples

Bootstrap использую именно с этого сайта. Кто может помочь с кодом, написать правильную ссылку и скрипт код что бы все работало?

3 ответа 3

2

Добрый день, только что ответил на похожий вопрос, посмотрите тут Не закрывать tooltip, пока мышка на него наведена?(bootstrap) Или Посмотрите полностью работающий пример тут

Если вас интересует полный код страницы, то он тут :

<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>

Надеюсь это вам поможет.

2

В объекте, над которым хчешь увидеть подсказку пишешь:

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

Между тегами <head></head> Напиши функцию инициализации

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

В итоге должно получится что-то вроде:

<!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>
0

В объекте где ты хочешь использовать тултип, напиши атрибут tooltip. А в head напиши такой код:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.