Не работает bootstrap tooltip

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

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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

HTML

JQuery

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

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

Ответ 8

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

Источник

Всплывающие подсказки Bootstrap Tooltips для сайта

В этой статье познакомимся с процессом создания всплывающих подсказок на фреймворке Bootstrap 3 и 4 версиях.

Tooltips и основные сведения о всплывающих подсказках

Всплывающая подсказка – это блок с некоторой информацией, появляющейся возле элемента при наведении на него курсора. Tooltips в Bootstrap могут быть добавлены к любым HTML элементам: img (изображениям), a (ссылкам), span и др.

В Bootstrap 3 и 4 компонент Tooltips построен как с использованием стилей, так и кода на JavaScript.

Позиционирование всплывающей подсказки возле элемента в Bootstrap 3 осуществлялось собственным кодом. В Bootstrap 4 эта ситуация изменилась, теперь это осуществляется с использованием сторонней библиотеки «popper.js». Это означает что файл «bootstrap.js» зависит от «popper.js» и его нужно подключить перед ним.

Кроме этого варианта, можно ещё воспользоваться одним файлом «bootstrap.bundle.js». Данный файл включает уже включает в себя библиотеку «popper.js».

При самостоятельной сборке JavaScript из исходных кодов Bootstrap 4, для работы компонента Tooltips необходимо кроме файла «tooltips.js» в проект ещё включить «utils.js».

Создание всплывающих подсказок

Перед тем как переходить к созданию всплывающих подсказок для элементов необходимо рассмотреть некоторые особенности работы с ними:

1. Всплывающие подсказки по соображениям производительности автоматически не инициализируются . Действие по инициализации необходимо выполнить дополнительно , например, после загрузки страницы.
2. Всплывающие подсказки с пустым содержимым не отображаются.
3. Установите параметру container значение body чтобы избежать проблем рендеринга этого компонента в более сложных компонентах (например, в input или button группах). В Bootstrap 4 данное значение параметр container имеет по умолчанию.
4. Всплывающие подсказки на скрытых элементах не работают.
5. Всплывающая подсказка для не активного элемента (т.е. имеющего класс disabled или атрибут disabled ) должна вызываться на его родителе.
6. При вызове Tooltips на гиперссылках, которые состоят из нескольких строк, всплывающие подсказки будут центрироваться. Используйте white-space: nowrap на элементе a , чтобы отключить такое поведение.
7. Всплывающие подсказки должны быть скрыты перед удалением соответствующих элементов из DOM.

Создание всплывающей подсказки осуществляется посредством добавления к HTML-элементу атрибута title с необходимым сообщением.

После этого, чтобы всплывающая подсказка работала, её необходимо инициализировать.

Для этого нужно прописать в скрипт следующий код:

В этом примере выбор элемента для которого нужно показывать tooltip осуществлялось по id .

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

Но если на странице много элементов, для которых нужно инициализировать всплывающую подсказку, то к ним нужно добавить какой-то опознавательный «знак», например, атрибут data-toggle=»tooltip» .

Затем в скрипте после загрузки DOM выбрать все эти элементы и вызвать для них метод tooltip .

Настройка всплывающей подсказки

В Bootstrap для настройки функциональности и поведения всплывающих подсказок имеются различные параметры. Их можно устанавливать как с помощью data-атрибутов, так и посредством JavaScript.

Список параметров компонента Tooltips:

• animation (тип: boolean ; значение по умолчанию: true ) – определяет необходимо ли процесс появления и скрытия всплывающей подсказки выполнять с анимацией.
• container (тип: string | element | false ; значение по умолчанию: false ) – определяет элемент, в который необходимо помещать код всплывающей подсказки. Например, если указать этому параметру значение «body», то код подсказки будет добавляться в конец содержимого элемента body . А если например, значение «#tooltip», то в элемент, id которого равно tooltip. По умолчанию, Bootstrap 3 помещает HTML-код tooltip после элемента, который вызвал эту подсказку, а Bootstrap 4 — в конец элемента body .
• delay (тип: number | object ; значение по умолчанию: 0 ) – устанавливает время задержки перед отображением и скрытием всплывающей подсказки в миллисекундах. Не работает с параметром trigger, которому установлено значение manual . При указании одного значения (числа), интервал задержки устанавливается одинаковым как перед отображением, так и перед скрытием. Для установки разного времени, значение параметра указывается в формате объекта. Например, delay: < show: 500, hide: 100 >. В этом случае пауза перед отображением будет 500 мс, а перед скрытием – 100 мс.
• html (тип: boolean ; значение по умолчанию: false ) – определяет можно ли в содержимом подсказки (tooltip) использовать HTML теги. Значение true данного параметра соответственно включает эту возможность, а false — отключает.
• placement (тип: string | function ; значение по умолчанию: «top» ) – позволяет настроить расположение всплывающей подсказки относительно элемента. Для установки доступны следующие значения: «auto», «top», «bottom», «left», «right». Значение auto предназначено для автоматического ориентирования подсказки. Кроме вышеприведённых значений для определения положения подсказки можно использовать функцию. Она получает 2 аргумента. В качестве первого аргумента — DOM-узел всплывающей подсказки, а в качестве второго — DOM-элемент, вызвавший её. В контексте функции ключевое слово this указывает на экземпляр tooltip.
• selector (тип: string | false ; значение по умолчанию: false ) – предназначен для инициализации подсказок у элементов, которые будут создаваться динамически после загрузки страницы.
  В качестве объекта, для которого необходимо вызвать данный метод ( tooltip ) нужно выбрать элемент, который всегда будет присутствовать на странице. В большинстве случаев, в качестве такого элемента выбирают document или body .
  В качестве значения этого параметра необходимо указать селектор , на основе которого будет осуществляться фильтрация потомков, для которых необходимо инициализировать подсказку.
• template (тип: string ; значение по умолчанию: ‘

Настройка всплывающих подсказок с помощью JavaScript осуществляется следующим образом:

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

Пример, в котором установка расположения подсказки осуществляется с помощью функции:

Ссылка, при нажатии на которую отображается всплывающая подсказка, которая в свою очередь тоже содержит ссылки (в примере используются параметры title, placement, trigger, html):

Всплывающая подсказка, содержащая изображение (в примере используются параметры title, html):

Изменения шаблона всплывающей подсказки осуществляется с помощью параметра template:

Инициализация всплывающей подсказки для динамических элементов, т.е. добавляемых на страницу уже после загрузки страницы (в примере используется параметр selector):

Подсказка для элемента, имеющего состояние disabled

Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или span, и вызвать уже подсказку посредством этого элемента.

Методы плагина Tooltips

Методы плагина Tooltips приведены в таблице.

Имя	Описание
.tooltip(options)	Этот метод инициализирует для одного или множества выбранных элементов всплывающие подсказки с указанными параметрами.
.tooltip(‘show’)	Метод, который включает отображение всплывающей подсказки у элемента.
.tooltip(‘hide’)	Метод, который убирает отображение всплывающей подсказки у элемента.
.tooltip(‘toggle’)	Этот метод переключает отображение подсказки у элемента. Т.е. если подсказка отображается у элемента, то убирает её. А если она не отображается, то включает её.
.tooltip(‘destroy’)	Имеется только в Bootstrap 3. Этот метод убирает всплывающую подсказку у элемента и удаляет её.
.tooltip(‘enable’)	Имеется только в Bootstrap 4. Этот метод включает возможность показа всплывающий подсказки у элемента. Всплывающие подсказки включены по умолчанию.
.tooltip(‘disable’)	Имеется только в Bootstrap 4. Этот метод отключает возможность показа всплывающий подсказки у элемента. Для того чтобы снова включить возможность показа всплывающей подсказки у элемента, для него необходимо вызвать метод tooltip с параметром ‘enable’ или ‘toggleEnabled’.
.tooltip(‘toggleEnabled’)	Имеется только в Bootstrap 4. Метод переключает возможность показа всплывающий подсказки у элемента.
.tooltip(‘update’)	Имеется только в Bootstrap 4. Обновляет положение всплывающей подсказки у элемента.
.tooltip(‘dispose’)	Имеется только в Bootstrap 4. Этот метод убирает всплывающую подсказку у элемента и удаляет её.

Пример использование методов для управления всплывающими подсказками (Bootstrap 3):

Пример использование методов для управления всплывающими подсказками (Bootstrap 4):

События плагина Tooltips

JS Tooltips генерирует для всплывающих подсказок пять событий.

Имя	Описание
show.bs.tooltip	Событие возникает после вызова метода show() .
shown.bs.tooltip	Это событие генерируется, когда подсказка становится полностью видимой пользователю (после завершения CSS переходов).
hide.bs.tooltip	Событие возникает после вызова метода hide() .
hidden.bs.tooltip	Это событие генерируется, когда подсказка становится полностью скрытой от пользователя (после завершения CSS переходов).
inserted.bs.tooltip	Это событие вызывается после события show.bs.tooltip, когда шаблон подсказки будет добавлен в DOM.

Пример работы с событиями (при возникновении события выведем имя события, и время когда оно произошло):

Как изменить цвет и ширину подсказки с помощью CSS

Изменить некоторые параметры подсказки можно посредством переопределения её CSS-свойств.

Например, изменим цвет подсказки и её максимальную ширину (Bootstrap 4):

Источник