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

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

241 голосов
/ 25 февраля 2012

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

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

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

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

Ответы [ 24 ]

267 голосов
/ 26 февраля 2012

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

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

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

180 голосов
/ 22 марта 2014

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

HTML 

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

JQuery 

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

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

32 голосов
/ 29 июня 2012

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

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

-bootstrap.css
-bootstrap.js

оба они могут быть найдены в http://twitter.github.com
и, наконец,
-Последняя версия jquery.js

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

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

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

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

Вот и все ...

25 голосов
/ 22 марта 2016

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

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

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

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

<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>
20 голосов
/ 03 августа 2013

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

присваивает вашему элементу класснапример "tooltip-test"

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

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

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
18 голосов
/ 21 апреля 2014

HTML 

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

JQuery 

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

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

14 голосов
/ 02 января 2014

Если вы сделаете $("[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.

13 голосов
/ 05 августа 2014

Это самый простой способ. Просто поставьте это перед </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>
10 голосов
/ 01 мая 2013

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

Итак, допустим, мы хотим, чтобы при нажатии кнопки html отображался всплывающий экран. 

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

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

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

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

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

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
5 голосов
/ 10 июня 2015

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

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

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...