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

Question

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

241

Я схожу с ума здесь.

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

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

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

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

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

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

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

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

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

Mike Bartlett 25 фев. 2012, в 18:18

Источник

2

Всплывающая подсказка инициируется в файле application.js в примере твиттеров. Можете ли вы опубликовать свой HTML? Хотелось бы взглянуть на то, как вы инициализируете скрипт.
Andres Ilich 25 фев. 2012, в 18:14
2

Ааааа .... Я проигнорировал это, учитывая первый комментарий. Так что это должно сработать: code <a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> test </a> <br> <script> // tooltip demo $ ( '.tooltip-test'). tooltip () </ script>
Mike Bartlett 25 фев. 2012, в 20:33
1

не забудьте передать селектор опциям всплывающей подсказки, $('.tooltip-test').tooltip({ selector: "a" })
Andres Ilich 25 фев. 2012, в 21:01
0

Спасибо Андрес. На самом деле мне там не нужен селектор, я думаю, это потому, что класс a упоминается как подсказка-тест.
Mike Bartlett 25 фев. 2012, в 21:28
3

Без опции селектора всплывающая подсказка у меня не работает, вот пример, который я выложил: jsfiddle.net/VXctp , попробуйте его без селектора.
Andres Ilich 25 фев. 2012, в 22:06
0

Это было решено? Если нет, то убедитесь, что вы используете последнюю версию JQuery - я обновил до JQuery 1.7.2, чтобы сделать эту работу
My Head Hurts 24 апр. 2012, в 11:15

Показать ещё 4 комментария

Теги:

twitter-bootstrap

24 ответа

Ещё вопросы

Всплывающая подсказка инициируется в файле application.js в примере твиттеров. Можете ли вы опубликовать свой HTML? Хотелось бы взглянуть на то, как вы инициализируете скрипт.
Ааааа .... Я проигнорировал это, учитывая первый комментарий. Так что это должно сработать: code <a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> test </a> <br> <script> // tooltip demo $ ( '.tooltip-test'). tooltip () </ script>
не забудьте передать селектор опциям всплывающей подсказки, $('.tooltip-test').tooltip({ selector: "a" })
Спасибо Андрес. На самом деле мне там не нужен селектор, я думаю, это потому, что класс a упоминается как подсказка-тест.
Без опции селектора всплывающая подсказка у меня не работает, вот пример, который я выложил: jsfiddle.net/VXctp , попробуйте его без селектора.
Это было решено? Если нет, то убедитесь, что вы используете последнюю версию JQuery - я обновил до JQuery 1.7.2, чтобы сделать эту работу

Manuel Ebert · Answer 1 · 2012-02-26T15-32-00.000Z

276

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

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

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

Manuel Ebert 26 фев. 2012, в 15:32

13

Для тех, кто работает с Rails, это уже определено в bootstrap.js.coffee с $(".tooltip").tooltip() . Просто убедитесь, что в ваш application.js включен //= require bootstrap .
slhck 15 апр. 2012, в 17:08
5

Добавление класса .tooltip к любому элементу сломает подсказки для меня. Содержимое внутри элемента с классом .tooltip будет скрываться, и всплывающая подсказка будет отображаться, если мне удастся найти скрытый элемент с помощью мыши. Использование любого другого селектора или имени класса будет работать нормально. \
Leito 12 фев. 2013, в 20:06
4

@Leito правильно, bootstrap определяет стили для .tooltip и по умолчанию они невидимы. Вы можете использовать атрибут rel или любой другой класс в качестве селектора.
Manuel Ebert 12 фев. 2013, в 22:26
3

Да, вам нужны ОБА HTML-разметка и селекторы JS. Это не альтернативные способы применения всплывающих подсказок.
ATSiem 14 май 2013, в 23:22
1

Некоторые могут пытаться отобразить всплывающую подсказку в модальном режиме, и это работает не во всех версиях начальной загрузки. Если вы попробуете это на обычной странице, а не на модальной, и она работает, то вы знаете, что это проблема.
mjnissim 20 авг. 2013, в 20:01
1

Вы также можете столкнуться с проблемами, пытаясь запустить всплывающие подсказки со страниц, загруженных с помощью AJAX. Попробуйте сделать это на той части страницы, которая не загружается Ajax динамически, и посмотрите, работает ли она тогда.
mjnissim 20 авг. 2013, в 20:18
0

Спасибо тебе за это! Если я инициализирую все сразу, как я могу определить другое направление для некоторых подсказок? Можно ли установить параметры даже в атрибуте тега?
metamagicson 24 нояб. 2013, в 05:12
0

Понял: я использую $ ("[rel = 'tooltip-bottom']"). Tooltip ({place: 'bottom'}); и соответствующее значение атрибута rel = "tooltip-bottom" или проще добавить тег data -place = "bottom".
metamagicson 24 нояб. 2013, в 05:23
0

@slhck не могли бы вы быть более конкретным, пожалуйста? Какая версия Rails или какой драгоценный камень инициализирует всплывающую подсказку Bootstrap за кулисами? Я вижу это в Rails 3.2.17 с использованием boostrap-sass-3.1.1.0, но я не могу найти ни одной строки кода, которая делает это
Isaac Betesh 04 март 2014, в 16:15
0

@IsaacBetesh Честно говоря, я не помню - это было 1,5 года назад. Код, который мы использовали в то время, был таким: github.com/maphub/maphub-portal
slhck 04 март 2014, в 17:53
0

Спасибо. Я думаю, что вы имели в виду другой драгоценный камень, чем bootstrap-sass. Может быть, твиттер-бутстрап-рельсы? Я думаю, что то, что я увидел, было встроенной функцией подсказки Chrome, а не какой-либо библиотекой JS.
Isaac Betesh 04 март 2014, в 18:48
0

Я был смущен документами по начальной загрузке; Я думал, что вам не нужен JavaScript, просто атрибут данных.
dudeNumber4 30 сен. 2014, в 18:58
1

Спасибо @Manuel Ваше предложение исправило подсказку для меня. Я использую Rails 4.2 До этого мне требовался начальный загрузчик в application.js но он не работал. Также я обнаружил, что мне нужно объявить rel="tooltip" в моем HTML, иначе функция JS не будет работать.
egyamado 05 фев. 2015, в 14:34

Показать ещё 11 комментариев

Marcus Hoelscher · Answer 2 · 2014-03-21T22-48-00.000Z

164

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

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

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

Marcus Hoelscher 21 март 2014, в 22:48

15

Спасибо! Это сработало для меня. Каким-то образом другие решения на этой странице не работают для меня.
Roman 27 июль 2014, в 04:41
1

Я с Романом. Это решение работает и с вариантами начальной загрузки css.
DaveCS 04 окт. 2014, в 01:00
0

Это сработало для меня. Ничто другое не пнул это в жизнь, пока я не попробовал это. Спасибо!
BlakePetersen 17 нояб. 2014, в 05:56
0

Это сработало и для меня. Любая идея, почему $ ('[data-toggle = "tooltip"]'). Tooltip ({'place ':' top '}); не работает?
ZeroCool 07 май 2015, в 10:23
0

Спасибо, это сработало для меня. Просто убедитесь, что вы вставляете код между тегами <script> ПОСЛЕ того, как загружаете библиотеку JQuery.
GeraldScott 09 апр. 2016, в 13:56
0

Я почти сошел с ума ... потом я попробовал это. :)
Ashikodi 04 май 2016, в 13:41
0

Спасибо, кажется, это зависит от того, где находится ваш компонент. В моем случае, когда он был только в основном контейнере, он работал как в загрузочном документе, но когда я поместил его в дерево начальной загрузки, он перестал работать. Это решение исправило мою проблему
robson 14 июнь 2016, в 12:53
0

Это все еще работает для 4.1.3, в отличие от стандартного $('body').tooltip() и ответа Мануэля Эберта.
VDWWD 01 сен. 2018, в 23:27

Показать ещё 6 комментариев

Harish Kumar · Answer 3 · 2012-06-29T13-17-00.000Z

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

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

-bootstrap.css
-bootstrap.js

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

Для глификонов вам понадобится изображение

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

Для всплывающей подсказки вам понадобится следующий script внутри вашего <head> </head> тег

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Что это...

Max O. · Answer 4 · 2016-03-22T20-22-00.000Z

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

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

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

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

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

помещая этот фрагмент кода в свой html, вы можете использовать всплывающие подсказки

Примеры:

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

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Спасибо, что поделились этой концепцией подписки! Никогда не читайте это из каких-либо руководств.
Решение для всех моих подсказок по jquery / bootstrap whoas
Предоставленная ссылка отсутствует: пожалуйста, посмотрите на getbootstrap.com/docs/4.1/components/tooltips

Amir Soleymani · Answer 5 · 2013-08-02T23-54-00.000Z

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

дать вашему элементу класс, подобный "tooltip-test"

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

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Это было единственное решение, которое сработало для меня. Я использую data-original-title = "{{someAngularJSVar}}", чтобы обновить заголовок, и он работает безупречно.

Igor Shvydok · Answer 6 · 2014-04-21T16-58-00.000Z

17

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

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

Igor Shvydok 21 апр. 2014, в 16:58

1

Это предложение отлично сработало и для меня. Мне понравилось, потому что это просто и элегантно. Это позволяет вам продолжать использовать стандарты Bootstrap, как если бы плагин был инициализирован по умолчанию, как это происходит с элементами Dropdown и Tab. Я добавил JS, предложенный @Igor, в новый файл и связал его с оригинальным bootstrap.js.
Iago Rodríguez-Quintana 08 май 2014, в 16:27

Shital Shah · Answer 7 · 2014-01-02T06-50-00.000Z

Если вы выполните $("[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 вообще.

Я борюсь с этим, потому что динамическое поколение проходит несколько уровней. Значение href является динамически генерируемым содержимым, а результирующий идентификатор div основан на номере элемента, который соответствует значению href. Так что, если у меня есть страница ссылок типа элемента A, то у меня есть список элементов a-1, item a-2, item a-3, каждая из этих ссылок относится к отдельной странице элементов, но я хочу содержимое всплывающей подсказки для отображения динамического содержимого при наведении, чтобы пользователь мог получить представление об элементе, прежде чем щелкнуть полную ссылку.
Это было самым полезным. У меня была подсказка для привязки к значку, а библиотека значков имела какую-то асинхронную загрузку, поэтому она не могла связываться. Это было так странно, потому что это работало бы при использовании селектора класса, но не ID. Спасибо за помощь!

Marcos Cassiano · Answer 8 · 2014-08-05T13-31-00.000Z

Это самый простой способ. Просто поместите это перед </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

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

Например:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

закройте атрибут type ... редактирование только одной опечатки - это PITA: S

Mayank Jaiswal · Answer 9 · 2013-05-01T11-14-00.000Z

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

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

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here some amazing content." 
     data-original-title="A Title" "
>button</a>

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

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

Фактически, выше код javascript активирует popover на всех элементах html, которые имеют класс "popovers-to-be-activated".

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

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

Rush.2707 · Answer 10 · 2015-06-10T11-01-00.000Z

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

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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

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

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

Harish Kumar · Answer 11 · 2012-07-06T08-51-00.000Z

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

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

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

Mike Stillion · Answer 12 · 2016-02-25T20-23-00.000Z

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

Примечание:

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

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

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

<head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

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

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

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

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

<span class="badge badge-sm badge-plain">Admin Mode</span>

Подсказки простого всплывающего окна

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

перед

<span class="badge badge-sm badge-plain">Admin Mode</span>

после

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

инициализатор

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

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

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

    <script src="/Scripts/app/inspinia.js" />

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

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

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

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

перед

<span class="badge badge-sm badge-plain">Admin Mode</span>

после

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

инициализатор

None

Обратите внимание, что любые дочерние элементы в элементе <span class="tooltip-demo"> будут правильно подготовлены. Я мог бы иметь три дочерних элемента, все необходимые подсказки и разместить их в одном контейнере.

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

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

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

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

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

перед

<span class="badge badge-sm badge-plain">Admin Mode</span>

после

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

инициализатор

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>

Andy.sin · Answer 13 · 2014-10-10T09-25-00.000Z

Я только что добавил:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

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

Dieter · Answer 14 · 2012-12-13T11-52-00.000Z

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

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

Andres Calle · Answer 15 · 2012-09-29T06-00-00.000Z

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

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

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

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

Очень надеялся, что это сработает для меня, но, увы, это не сработало.
Теперь я больше увлечен Djanto, чем Rails, но если вы вставите свой код, я могу попытаться дать вам несколько советов.

Karthik · Answer 16 · 2012-03-01T16-19-00.000Z

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

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

В этом случае DOM еще не загружен, поэтому все элементы могут отсутствовать на странице. Оберните код выше в $(function() { ... });

Shawn Vader · Answer 17 · 2014-06-11T15-55-00.000Z

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

I have added a jsfiddle example

пример

Zoom · Answer 18 · 2014-01-28T10-03-00.000Z

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

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

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

$(document).ready(function() {

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

});

</script>

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

chri_chri · Answer 19 · 2013-07-17T23-49-00.000Z

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

Rahil Ahmad · Answer 20 · 2018-08-20T14-31-00.000Z

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

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

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

Joao Leme · Answer 21 · 2012-05-30T19-41-00.000Z

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

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

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

Calum Childs · Answer 22 · 2017-09-30T08-49-00.000Z

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

Calum Childs · Answer 23 · 2017-07-16T14-01-00.000Z

Вам нужно сделать следующее. Добавить

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

код где-то на вашей странице (желательно в разделе <head>).

Также добавьте data-toggle: "tooltip" ко всему, что вы хотите включить с ним.

jdisla · Answer 24 · 2017-05-13T17-16-00.000Z

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

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

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);
});

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

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

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