Как заставить Twitter Bootstrap jQuery Elements (всплывающую подсказку, всплывающее окно и т. Д.) Работать? - PullRequest
Новая
       24

Как заставить Twitter Bootstrap jQuery Elements (всплывающую подсказку, всплывающее окно и т. Д.) Работать?

6 голосов
/ 16 февраля 2012

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

На демонстрационной странице этот код упоминается для чего-то: 

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

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

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

EDIT

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

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

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

Ответы [ 3 ]

31 голосов
/ 08 февраля 2013

Для людей, которые приходят сюда из 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>

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

9 голосов
/ 16 февраля 2012

Вам нужно указать идентификатор или класс для элемента, который вы хотите отобразить, когда всплывающее окно находится над ним. Вот пример: 

<div id="example">Some element</div>

<script>
  $('#example').popover({
    title: 'A title!',
    content: 'Some content!' 
  })
</script>
0 голосов
/ 19 мая 2014

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

    $(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>
...