Как сделать подсказку Bootstrap 3 такой же, как в документации

В Twitter Bootstrap 3, когда вы смотрите на всплывающую подсказку, она выглядит так, как показано ниже.Как сделать подсказку Bootstrap 3 такой же, как в документации

This is what appears on the Documentation

Когда я пытался это делать. Так появляется всплывающая подсказка.

enter image description here

Это код, который я использовал.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> 
    Tooltip on left 
</button>

Update

Это мой JS код

$('#tooltip1').tooltip('options')

источник

2013-10-14 lozadaOmr

Активировать первую вашу подсказку .. '$ ('# example'). Tooltip (options)' – Olrac

Включить всплывающие подсказки во всем мире, используя атрибут data-toggle '] $ (function() { $ ('[data-toggle = "tooltip"] '). tooltip() }) '. –

Вы должны поместить Tooltip on left в data-original-title="Tooltip on left" и id="tooltip1", чтобы соответствовать вашему сценарию.

<button id="tooltip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left"> 
    Tooltip on left 
</button>

Это не работает, потому что ваш скрипт ссылается на идентификатор, который у вас не был, и 'option' в качестве строки. опции должны быть пустыми или что-то вроде «show» или «hide», но в вашем случае это будет работать.

изменение:

$('#tooltip1').tooltip('options')

к:

$('#tooltip1').tooltip();

обязательно включать точку с запятой.

UPDATE: Вот простой пример

<html lang="en"> 
    <head> 
     <title> 
      Bootstrap Tool-Tip preview 
     </title> 
     <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"> 
     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 col-md-offset-6"> 
        <button data-original-title="Tooltip on left" data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" id="tooltip1"> 
         Tooltip on left 
        </button> 
       </div> 
      </div> 
     </div> 
     <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script> 
     <script id="bsJs" type="text/javascript"> 
     $(document).ready(function() { 
      $('#tooltip1').tooltip(); 
     }); 
     </script> 
    </body> 
</html>

См Пример: bootply

источник

2013-10-14 02:59:00 hcoat

, но всплывающая подсказка по-прежнему выглядит по умолчанию. Не такая, как в документации Bootstrap 3? – lozadaOmr

Ваш вызов использует что-то вроде $ ('button'). Tooltip(); ? Требуется.Если да, пожалуйста, покажите нам больше своего кода. – hcoat

Я обновил и добавил свой вопрос. – lozadaOmr

Вам нужны "данные-плейсмент" со значением "левый"

<button type="button" class="btn btn-default" data-placement="left" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> 
    Tooltip on left 
</button>

Запомнить загрузить всплывающую подсказку ко всему месту с помощью data-toggle = "tooltip", вам нужно написать jQuery перед клоном С.Е. это предложение:

<script type="text/javascript"> 
$(document).ready(function() { 
// Tooltip 
     $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script>

источник

2013-10-14 04:12:56 jcry87

I aleardy помещает данные и коды «

Как сделать подсказку Bootstrap 3 такой же, как в документации

ответ

Смежные вопросы