2012-02-15 2 views
6

Я играл с тестовой страницей Bootstrap Twitter в Dreamweaver, и я абсолютно не могу получить какой-либо popover, всплывающую подсказку или другую полезную инструкцию для загрузки jQuery. Я скопировал код с демонстрационной страницы, вылил поверх исходного кода, имел прямые ссылки на все правильные файлы JavaScript и все равно ничего. CSS работает отлично, хотя, просто ни одна анимация.Как получить щебетать Элементы jQuery Bootstrap (подсказка, popover и т. Д.)?

Демонстрационная страница упоминает этот код на что-то:

$('#example').popover(options) 

Но я понятия не имею, что делать с чем-то вроде этого, потому что я не видел ничего подобного, что в любом рабочем месте.

Если бы кто-нибудь мог дать мне какие-либо предложения по (возможно) крошечной ссылке, которую я пропускаю, я бы очень признателен.

EDIT

Я нашел следующий фрагмент кода после регистрации этого:

$(document).ready(function() { 
    $("a[rel=popover]") 
     .popover({ 
      offset: 10 
     }) 
     .click(function(e) { 
      e.preventDefault() 
     }) 
}); 

И получил Popovers запуск! Я никогда не видел ничего подобного в исходном коде любого рабочего сайта, который я видел. На самом деле, пожелания документации Bootstrap могли бы сделать эту крошечную деталь немного более ясной для новых пользователей jQuery, таких как я.

+1

Возникает любые проблемы в консоли? Возможно, это может свидетельствовать о том, что происходит неправильно. –

+0

Может также быть хорошей идеей включить декларации '

31

Для людей, приезжающих сюда из Google:

Вы можете получить подсказку и поповер работать автоматически, как и другие плагины Bootstrap с помощью следующего кода:

<script type="text/javascript"> 
    $(function() { 
     $('body').popover({ 
      selector: '[data-toggle="popover"]' 
     }); 

     $('body').tooltip({ 
      selector: 'a[rel="tooltip"], [data-toggle="tooltip"]' 
     }); 
    }); 
</script> 

Вы можете затем используйте атрибуты данных, как обычно:

<a rel="tooltip" title="My tooltip">Link</a> 
<a data-toggle="popover" data-content="test">Link</a> 
<button data-toggle="tooltip" data-title="My tooltip">Button</button> 

Это то, что Bootst rap docs означают, когда говорится, что data-api для этих плагинов «выбирается».

+1

Да, это известная проблема с последними версиями Bootstrap: https://github.com/twitter/bootstrap/issues/7163. Пожалуйста, удалите эту проблему на GitHub, если вы хотите, чтобы она была исправлена, она долгое время сидит в списке проблем. –

+0

@vfcosta: эта проблема была исправлена ​​тем временем. Не могли бы вы прокомментировать свой комментарий? Благодарю. –

+0

[код инициализации, рекомендованный Bootstrap now] (http://getbootstrap.com/javascript/#popovers) отличается: '$ (function() { $ ('[data-toggle =" popover "]'). popover() }) ' –

0

Если вы хотите самозагрузок подсказки затем:

$(function() { 
     $("[rel='tooltip']").tooltip(); 
    }); 

Если вы хотите Jquery подсказки затем:

/*** Handle jQuery plugin naming conflict between jQuery UI ***/ 
$.widget.bridge('uitooltip', $.ui.tooltip); 

    $(function() { 
     $("[rel='tooltip']").uitooltip(); 
    }); 

HTML будет оставаться таким же, как в случае:

<div title="Tooltip text" rel="tooltip"> div data ... </div>