Всплывающие подсказки Bootstrap не работают

Я схожу с ума.

У меня есть следующий HTML:

test 

И подсказка типа Bootstrap отказывается отображать, просто обычная подсказка.

У меня bootstrap.css работает отлично, и я вижу classы там

У меня есть все соответствующие JS-файлы в конце моего HTML-файла:

      

Я посмотрел на источник примера Bootstrap и не вижу ничего, что инициирует всплывающую подсказку где угодно. Поэтому я предполагаю, что это должно сработать, или я пропустил что-то жизненно важное здесь?

У меня есть модалы, предупреждения и другие вещи, которые работают нормально, поэтому я не полный придурок;)

Спасибо за любую помощь!

    Подводя итог: активируйте всплывающие подсказки с помощью селекторов jQuery

      

    На самом деле вам не нужно использовать селектор атрибутов, вы можете вызывать его на любом элементе, даже если он не имеет rel="tooltip" в своем теге.

    После того, как я столкнулся с той же проблемой, я нашел, что это решение работает без необходимости добавлять дополнительные атрибуты тега за пределы требуемых атрибутов Bootstrap.

    HTML

     Hyperlink Text 

    JQuery

     $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); 

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

    Вам не нужны все файлы js отдельно

    Просто используйте следующие файлы, если вы собираетесь использовать все функции начальной загрузки:

     -bootstrap.css -bootstrap.js 

    оба из них можно найти в http://twitter.github.com
    и наконец
    -Latest версия jquery.js


    Для Глификон вам нужно изображение

    glyphicons-halfings.png и / или glyphicons-halfings-white.png (белые цветные изображения)
    который вам нужно загрузить внутри / img / folder ur веб-сайта (или) сохранить его там, где захочется, но изменить каталог папки внутри bootstrap.css


    Для всплывающей подсказки вам нужен следующий скрипт внутри вашего

       

    Это оно…

    http://getbootstrap.com/javascript/#tooltips-usage

    Функциональность выбора. По соображениям производительности всплывающая подсказка и данные Popover-apis являются опциями, что означает

    вы должны инициализировать их самостоятельно.

    Одним из способов инициализации всех всплывающих подсказок на странице было бы выбрать их по атрибуту data-toggle:

      

    Поместите этот fragment кода в свой html, чтобы вы могли использовать всплывающие подсказки

    Примеры:

        Hover over me 

    Я знаю, что это старый вопрос, но поскольку у меня возникла эта проблема с новой версией бутстрапа и ее непонятным на веб-сайте, вот как вы активируете всплывающую подсказку.

    дайте вашему элементу class, подобный «tooltip-test»,

    затем активируйте этот class в теге javascript:

      This link 

    HTML

     Hyperlink Text 

    JQuery

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

    Эта работа для меня.

    Если вы делаете $("[rel='tooltip']").tooltip(); как предложили другие ответы, вы активируете всплывающие подсказки только для элементов, которые в настоящее время находятся в DOM. Это означает, что если вы собираетесь изменить DOM и вставить динамический контент позже, это не сработает. Кроме того, это гораздо менее эффективно, поскольку он устанавливает обработчик событий для отдельных элементов, а не для делегирования события JQuery. Поэтому лучший способ, который я нашел для активации всплывающих подсказок Bootstrap, – это одна строка кода, которую вы можете разместить в документе и забыть об этом:

     $(document.body).tooltip({ selector: "[title]" }); 

    Обратите внимание, что я использую title как селектор вместо rel=title или data-title . Это имеет то преимущество, что его можно применять ко многим другим элементам ( rel должен быть только для якорей), а также он работает как «резервный» для старых браузеров.

    Также обратите внимание, что вам не нужен атрибут data-toggle="tooltip" если вы используете вышеуказанный код.

    Всплывающие подсказки Bootstrap дороги, потому что вам нужно обрабатывать события мыши на каждом из элементов. Именно по этой причине они не включили его по умолчанию. Поэтому, если вы когда-нибудь решите прокомментировать вышеприведенную строку, ваша страница будет работать, если вы используете атрибут title.

    Если вы не используете атрибут title, я бы рекомендовал использовать чистое решение CSS, такое как Hint.css, или проверить http://csstooltip.com, который вообще не требует какого-либо кода JavaScript.

    Это самый простой способ. Просто поставьте это перед :

      

    Ознакомьтесь с примерами, приведенными в документации Bootstrap о подсказках .

    Например:

     Link with tooltip 

    Подсказка и всплывающие windows – это не только плагины css, такие как раскрывающийся список или панель прогресса. Чтобы использовать всплывающие подсказки и popover, вы ДОЛЖНЫ активировать их с помощью jquery (читайте javascript).

    Итак, скажем, мы хотим, чтобы popover отображался при нажатии кнопки html.

     button 

    Тогда вам нужно иметь следующий код javascript для активации popover:

     $('.popovers-to-be-activated').popover(); 

    На самом деле, выше код javascript активирует popover на всех элементах html, у которых есть class «popovers-to-be-activated».

    Само собой разумеется, поместите вышеуказанный javascript внутри обратного вызова DOM-ready, чтобы активировать все popovers, как только DOM будет готов:

     $(function() { // Handler for .ready() called. $('.popovers-to-be-activated').popover(); }); 

    в главном разделе вам нужно сначала добавить следующий код

           

    Затем в разделе body вам нужно написать следующий код

     

    The data-placement attribute specifies the tooltip position.

    Если все еще не разрешено. Используйте последнюю библиотеку Jquery, вам не нужен какой-либо из селекторов jquery, если вы используете последнюю версию bootstrap 2.0.4 и jquery-1.7.2.js

    Просто используйте rel="tooltip" title="Your Title" data-placement=" "

    Используйте верхнюю / нижнюю / левую / правую позицию размещения данных согласно вашему желанию.

    Я добавил jquery и bootstrap-tooltip.js в заголовке. Добавление этого кода в нижний колонтитул работает для меня! но когда я добавляю тот же код в заголовке, он не работает!

      

    Если использовать Rails + Haml гораздо проще включить всплывающую подсказку, просто выполните:

     = link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide" 

    Это просто добавьте следующую строку в конец элемента.

     :rel => "tooltip", :title => "Referential Guide" 

    В моем конкретном случае это не сработало, потому что я включал две версии jQuery. Один для бутстрапа, но другой (другая версия) для Google Charts.

    Когда я удаляю загрузку jQuery для диаграмм, она отлично работает.

    Я просто добавил:

      

    ниже bootstrap.min.js, и он работает.

    Давайте используем пример, чтобы показать, как всплывающие подсказки можно добавить к любому элементу HTML в вашем документе.

    ЗАМЕТКА:

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

    • Порядок включения скриптов
    • Посмотрите, пытаетесь ли вы инициализировать удаленные HTML-элементы
    • Посмотрите, пытаетесь ли вы вызвать методы в файлах JS, которые вы больше не включаете
    • Посмотрите, включаете ли вы JS-файл, который предоставляет нужные вам функции (не только для всплывающих подсказок, но и для любых компонентов, которые вы используете на странице).

             ... your HTML code ...     ... your JavaScript initializers ...  

    Неспособность ЛЮБОГО из вышеуказанных пунктов может (и часто делает) предотвращать загрузку и / или запуск javascript, и это держит все красивое и сломанное.

    РАБОЧИЕ ПРИМЕРЫ

    Допустим, у вас есть значок, и вы хотите, чтобы он показывал всплывающую подсказку, когда пользователь наводил на нее надзор.

    Оригинальный HTML:

     Admin Mode 

    Подсказки Plain Bootstrap

    Если вы создаете всплывающие подсказки для HTML-элемента, и вы используете всплывающие подсказки Plain Bootstrap, тогда вы будете нести ответственность за вызов Инициализаторов всплывающих подсказок с помощью собственного кода JavaScript.

    ДО

     Admin Mode 

    ПОСЛЕ

     Admin Mode 

    Initializer

      

    Всплывающие подсказки шаблонов Bootstrap (например, INSPINIA)

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

       

    В случае INSPINIA включенный скрипт автоматически инициализирует все всплывающие подсказки, запустив следующий код javascript, когда документ завершит загрузку:

     // Tooltips demo $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" }); 

    Из-за этого вам не нужно самостоятельно инициализировать подсказки в стиле INSPINIA. Но вам нужно форматировать свои элементы определенным образом. Инициализатор ищет элементы HTML с помощью tooltip-demo в атрибуте class , затем вызывает метод tooltip() для инициализации всех дочерних элементов, которые имеют атрибут data-toggle="tooltip" .

    Для нашего примера значок, поместите вокруг него внешний элемент (например,

    или ), который имеет class="tooltip-demo" , затем поместите атрибуты data-toggle data-placement и title для фактической подсказки внутри элемента, являющегося значком. Измените исходный HTML-код выше, чтобы выглядеть примерно так:

    ДО

     Admin Mode 

    ПОСЛЕ

      Admin Mode  

    Initializer

     None 

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

    Несколько элементов, каждый с подсказкой

      Text 001 Text 002 Text 003  

    Наилучшее использование для этого было бы добавить class="tooltip-demo" в

    или внешний

    или .

    Подсказки Plain Bootstrap при использовании шаблона

    Если вы используете INSPINIA, но не хотите добавлять дополнительные внешние tags

    или для создания всплывающих подсказок, вы можете использовать стандартные всплывающие подсказки Bootstrap без вмешательства в шаблон. В этом случае вы сами несете ответственность за инициализацию всплывающих подсказок. Однако вы должны использовать настраиваемое значение в атрибуте class для идентификации ваших элементов Tooltip. Это приведет к тому, что инициализатор Tooltip не будет мешать элементам, затронутым INSPINIA. В нашем примере давайте использовать standalone-tt :

    ДО

     Admin Mode 

    ПОСЛЕ

     Admin Mode 

    Initializer

      

    Если вы создаете свой html, содержащий всплывающую подсказку с javascript, а затем вставляете его в документ, вам нужно активировать popover / tooltip ПОСЛЕ того, как вы вставили html в документ, а не на загрузку документа …

    Вы должны поместить подсказку javascript после html. как это :

      I am Here  

    Или используйте $ (document) .ready:

     $(document).ready(function() { $("* [rel='tooltip']").tooltip({ html: true, placement: 'bottom' }); });  

    Всплывающая подсказка не работает, потому что вы помещаете подсказку html перед javascript , поэтому они не знают, есть ли javascript для всплывающей подсказки. По-моему, сценарий читается сверху вниз.

    У меня была аналогичная проблема, особенно если вы работаете в контейнере с кнопками, например, в контейнере с вертикальной кнопкой. В этом случае вы должны установить контейнер как «тело»,

     I have added a jsfiddle example 

    пример

    Поместите свой код внутри документа в готовность

     $(document).ready(function () { if ($("[rel=tooltip]").length) { $("[rel=tooltip]").tooltip(); } }); 

    В моем случае мне также не хватало classы css всплывающих подсказок на http://twitter.github.com/bootstrap/assets/css/bootstrap.css, поэтому не забывайте об этом.

    Вам необходимо сделать следующее:

    • Добавьте где-нибудь на вашей странице (желательно в разделе )
    • Добавьте data-toggle: "tooltip" на все, что вы хотите включить с ней.

    Добавьте data-toggle="tooltip" для любых элементов, которые вы хотите с помощью всплывающей подсказки.

    Из загрузочных документов на всплывающих подсказках

    Подсказки выбираются по соображениям производительности, поэтому вы должны сами их инициализировать. Одним из способов инициализации всех всплывающих подсказок на странице было бы выбрать их по атрибуту data-toggle:

      $('[data-toggle="tooltip"]').tooltip() 

    Быстрая и легкая альтернатива плагину всплывающей подсказки Bootstrap:

    HTML:

     
    6 characters long, must include letters and numbers

    CSS:

      

    JSCRIPT:

     $(".mytooltip").mouseover(function(){ var elm = this.id; $("#" + elm + "_tttext").fadeIn("slow"); }); var ttTmo; $(".mytooltip").mouseout(function(){ var elm = this.id; clearTimeout(ttTmo); ttTmo = setTimeout(function(){ $("#" + elm + "_tttext").fadeOut("slow"); },3000); }); 

    Ярлык / текст должен быть заключен в оболочку classа «mytooltip». Эта shell должна иметь идентификатор.

    После метки есть текст подсказки инструмента, завернутый в div classа «mytooltiptext» и id, состоящий из идентификатора родительской оболочки + «_tttext». Могут использоваться другие варианты для селекторов.

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

    Давайте будем гением компьютера.