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

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

У меня есть следующий 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 и не вижу ничего, что инициирует всплывающую подсказку где-нибудь там. Поэтому я предполагаю, что это должно сработать, или я пропустил что-то жизненно важное здесь?

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

HTML

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

JQuery

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

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

Ответ 3

Вам не нужны все 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>

Что это...

Ответ 4

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>

Ответ 5

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

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

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

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

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

Ответ 6

HTML

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

JQuery

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

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

Ответ 7

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

Ответ 8

Это самый простой способ. Просто поместите это перед </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>

Ответ 9

Всплывающая подсказка и всплывающие окна - это не только плагины 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();
});

Ответ 10

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

<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>

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

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

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

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

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

Ответ 14

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

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

Ответ 15

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

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

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

Ответ 16

Давайте используем пример, чтобы показать, как всплывающие подсказки можно добавить к любому элементу 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>

Ответ 17

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

Ответ 18

Вы должны поместить подсказку 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 читается сверху вниз.

Ответ 19

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

I have added a jsfiddle example

пример

Ответ 20

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

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

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

Ответ 21

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

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

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

Ответ 22

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

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

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

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

Ответ 23

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

Ответ 24

Быстрая и легкая альтернатива плагину всплывающей подсказки 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". Можно использовать другие опции для селекторов.

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