Я схожу с ума здесь.
У меня есть следующий 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 и не вижу ничего, что инициирует всплывающую подсказку где-либо там. Я предполагаю, что это должно сработать, или я что-то упустил здесь?
У меня есть модалы, оповещения и другие вещи, которые работают просто отлично, так что я не полный дебил;)
Спасибо за любую помощь!
twitter-bootstrap
Майк Бартлетт
источник
источник
code
<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> тест </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </ script>$('.tooltip-test').tooltip({ selector: "a" })
Ответы:
Подводя итог: активируйте всплывающие подсказки с помощью селекторов jQuery
На самом деле, вам не нужно использовать селектор атрибута, вы можете вызвать его для любого элемента, даже если его нет
rel="tooltip"
в его теге.источник
bootstrap.js.coffee
с$(".tooltip").tooltip()
. Просто не забудьте включить//= require bootstrap
в свойapplication.js
..tooltip
и по умолчанию они невидимы. Вы можете использоватьrel
атрибут или любой другой класс в качестве селектора.После того, как я столкнулся с той же проблемой, я обнаружил, что это решение работает без необходимости добавления дополнительных атрибутов тега вне обязательных атрибутов Bootstrap.
HTML
JQuery
Надеюсь это поможет!
источник
Вам не нужны все файлы js отдельно
Просто используйте следующие файлы, если вы собираетесь использовать все функции начальной загрузки:
оба они могут быть найдены в http://twitter.github.com
и, наконец, -
Последняя версия jquery.js
Для Glyphicons вам нужно изображение
glyphicons-halfings.png и / или glyphicons-halfings-white.png (изображения белого цвета),
которые необходимо загрузить в папку / img / вашего веб-сайта (или) сохранить ее там, где вы хотите, но измените каталог папки внутри загрузчика .css
Для всплывающей подсказки вам нужен следующий скрипт внутри вашего
<head> </head>
тегаЭто оно...
источник
http://getbootstrap.com/javascript/#tooltips-usage
Функциональность подписки По соображениям производительности, всплывающая подсказка и всплывающая подсказка data-apis означают
Один из способов инициализации всех всплывающих подсказок на странице - выбрать их по их атрибуту data-toggle:
поместив этот кусок кода в ваш HTML, вы можете использовать всплывающие подсказки
Примеры:
источник
Я знаю, что это старый вопрос, но так как у меня была эта проблема с новым выпуском bootstrap, и ее не ясно на сайте, вот как вы можете включить всплывающую подсказку.
присвойте своему элементу класс типа "подсказка-тест"
затем активируйте этот класс в своем теге javascript:
источник
HTML
JQuery
Это работа для меня.
источник
Если вы поступите так,
$("[rel='tooltip']").tooltip();
как предлагали другие ответы, вы активируете всплывающие подсказки только для элементов, которые в данный момент находятся в DOM. Это означает, что если вы собираетесь изменить DOM и вставить динамический контент позже, он не будет работать. Кроме того, это гораздо менее эффективно, поскольку устанавливает обработчик событий для отдельных элементов, а не использует делегирование событий JQuery. Поэтому лучший способ активировать всплывающие подсказки Bootstrap - это одна строка кода, которую вы можете поместить в готовый документ и забыть об этом:Обратите внимание, что я использую
title
как селектор вместоrel=title
илиdata-title
. Это имеет то преимущество , что он может быть применен ко многим другим элементам (rel
как предполагается , будет только для анкеров) , а также работает как «запасной вариант» для старых браузеров.Также обратите внимание, что вам не нужно
data-toggle="tooltip"
атрибут, если вы используете приведенный выше код.Всплывающие подсказки являются дорогими, потому что вам нужно обрабатывать события мыши для каждого из элементов. Это причина, почему они не включили его по умолчанию. Так что, если вы когда-нибудь решите закомментировать выше строки, ваша страница все равно будет работать, если вы используете атрибут title.
Если вы не хотите использовать атрибут title, я бы порекомендовал использовать чистое CSS-решение, такое как Hint.css, или проверить http://csstooltip.com, который вообще не требует кода JavaScript.
источник
Это самый простой способ. Просто поместите это перед
</body>
:Посмотрите примеры, приведенные в документации Bootstrap о подсказках .
Например:
источник
Всплывающая подсказка и всплывающее окно НЕ являются только плагинами CSS, такими как выпадающий список или индикатор выполнения. Чтобы использовать всплывающие подсказки и всплывающие окна, вы ДОЛЖНЫ активировать их с помощью jquery (читайте javascript).
Итак, допустим, мы хотим, чтобы всплывающее окно отображалось при нажатии кнопки HTML.
Тогда вам нужно иметь следующий код javascript для активации popover:
На самом деле вышеупомянутый код javascript активирует popover для всех элементов html, которые имеют класс «popovers-to-be-activated».
Разумеется, поместите вышеуказанный javascript в обратный вызов DOM-ready, чтобы активировать все всплывающие окна, как только DOM будет готов:
источник
в главном разделе вы должны сначала добавить следующий код
Затем в разделе тела вам нужно написать следующий код
источник
Если все еще не решено. Использовать последнюю библиотеку Jquery, вам не понадобится ни один из селекторов jquery, если вы используете последнюю версию bootstrap 2.0.4 и jquery-1.7.2.js.
Просто используйте
rel="tooltip" title="Your Title" data-placement=" "
Используйте верхний / нижний / левый / правый в размещении данных по вашему желанию.
источник
Я добавил jquery и bootstrap-tooltip.js в заголовок. Добавление этого кода в нижний колонтитул работает для меня! но когда я добавляю тот же код в заголовок, он не работает!
источник
$(function() { ... });
Если с помощью Rails + Haml намного проще включить всплывающую подсказку, просто выполните:
То есть просто добавьте следующую строку в конце элемента.
источник
В моем конкретном случае это не сработало, потому что я включал две версии jQuery. Один для начальной загрузки, а другой (другая версия) для Google Charts.
Когда я удаляю загрузку jQuery для диаграмм, она работает нормально.
источник
Я только добавил:
ниже bootstrap.min.js и это работает.
источник
Давайте используем пример, чтобы показать, как всплывающие подсказки могут быть добавлены к любому элементу HTML в вашем документе.
НОТА:
Если эти образцы всплывающих подсказок не работают, когда вы помещаете их на страницу, у вас есть другая проблема. Вы должны смотреть на такие вещи, как:
Посмотрите, включаете ли вы файл JS, который обеспечивает необходимую вам функциональность (не только для всплывающих подсказок, но и для любых компонентов, которые вы используете на странице).
Отказ ЛЮБОГО из вышеперечисленных элементов может (и часто делает) препятствовать загрузке и / или запуску javascript, и это делает все в порядке и не работает.
РАБОЧИЕ ПРИМЕРЫ
Допустим, у вас есть значок, и вы хотите, чтобы он отображал всплывающую подсказку, когда пользователь наводит на нее курсор.
Оригинальный HTML:
Обычные подсказки
Если вы создаете всплывающие подсказки для HTML-элемента и используете всплывающие подсказки Plain Bootstrap, то вы будете нести ответственность за вызов инициализаторов всплывающей подсказки со своим собственным кодом JavaScript.
ПЕРЕД
ПОСЛЕ
Initializer
Всплывающие подсказки шаблона начальной загрузки (например, INSPINIA)
Если вы используете шаблон начальной загрузки (например, INSPINIA), вы включаете вспомогательный скрипт для поддержки функций шаблона:
В случае INSPINIA включенный скрипт автоматически инициализирует все всплывающие подсказки, выполнив следующий код JavaScript после завершения загрузки документа:
Из-за этого вам НЕ нужно инициализировать подсказки в стиле INSPINIA самостоятельно. Но вам НЕОБХОДИМО отформатировать ваши элементы определенным образом. Инициализатор ищет элементы HTML
tooltip-demo
вclass
атрибуте, а затем вызываетtooltip()
метод для инициализации любых дочерних элементов, для которыхdata-toggle="tooltip"
определен атрибут .Для нашего примера значка, поместите внешний элемент вокруг него (например,
<div>
или<span>
) , который имеетclass="tooltip-demo"
, то местоdata-toggle
,data-placement
иtitle
атрибутов для фактической подсказки внутри элемента , который является значком. Измените исходный HTML сверху, чтобы он выглядел примерно так:ПЕРЕД
ПОСЛЕ
Initializer
Обратите внимание, что любые дочерние элементы внутри
<span class="tooltip-demo">
элементе будут иметь правильно подготовленную подсказку. Я мог бы иметь три дочерних элемента, все нуждающиеся во всплывающих подсказках, и поместить их в один контейнер.Несколько предметов, каждый с всплывающей подсказкой
Лучшее использование для этого было бы добавить
class="tooltip-demo"
к<td>
или внешней<div>
или<span>
.Обычные всплывающие подсказки при использовании шаблона
Если вы используете INSPINIA, но не хотите добавлять дополнительные внешние элементы
<div>
или<span>
теги для создания всплывающих подсказок, вы можете использовать стандартные всплывающие подсказки Bootstrap без вмешательства в шаблон. В этом случае вы будете нести ответственность за инициализацию подсказок самостоятельно. Тем не менее, вы должны использовать пользовательское значение вclass
атрибуте, чтобы идентифицировать элементы подсказки. Это не даст инициализатору всплывающей подсказки вмешиваться в элементы, на которые влияет INSPINIA. В нашем примере давайте используемstandalone-tt
:ПЕРЕД
ПОСЛЕ
Initializer
источник
Если вы создаете свой HTML, который содержит всплывающую подсказку с javascript, а затем вставляете ее в документ, вы должны активировать всплывающую подсказку / подсказку ПОСЛЕ того, как вы вставили HTML в документ, а не при загрузке документа ...
источник
Вы должны поместить всплывающую подсказку javascript после html. как это :
Или используйте $ (document) .ready:
Всплывающая подсказка не работает, потому что вы поместили всплывающую подсказку html перед javascript , поэтому они не знают, существует ли javascript для всплывающей подсказки. На мой взгляд, скрипт читается сверху вниз.
источник
У меня была похожая проблема, особенно если вы работаете в контейнере кнопок, например в вертикальном контейнере кнопок. В этом случае вы должны установить контейнер как «тело»
пример
источник
Поместите свой код в документ готов
В моем случае я также пропускал классы css всплывающей подсказки на http://twitter.github.com/bootstrap/assets/css/bootstrap.css, так что не забывайте об этом.
источник
Из документов начальной загрузки на всплывающие подсказки
Подсказки включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно. Один из способов инициализации всех всплывающих подсказок на странице - выбрать их по атрибуту data-toggle:
источник
Добавьте
data-toggle="tooltip"
в любой элемент, который вы хотите с помощью всплывающей подсказки.источник
Вам нужно сделать следующее. Добавить
код где-то на вашей странице (желательно в
<head>
разделе).Также добавьте
data-toggle: "tooltip"
все, что вы хотите включить с ним.источник
Вы можете использовать Popper.js
И вызвать функцию всплывающей подсказки:
источник
Быстрая и легкая альтернатива плагину Bootstrap:
HTML:
CSS:
JSCRIPT:
Метка / текст должен быть заключен в оболочку класса "mytooltip". Эта оболочка должна иметь идентификатор.
После метки есть текст подсказки, заключенный в div класса "mytooltiptext" и идентификатор, состоящий из идентификатора родительской оболочки + "_tttext". Другие варианты для селекторов могут быть использованы.
Надеюсь, поможет.
источник