Bootstrap: Collapse и Tooltip вместе

Я хочу знать, возможно ли иметь всплывающую подсказку для тега привязки коллапса. Код, который используется для коллапса:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a>

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

<a data-toggle="collapse tooltip" title ="Tooltip Message" data-parent="#accordion" href="#collapseOne">Data</a>

Теперь он показывает всплывающую подсказку, но функция коллапса не работает. Какие изменения я должен сделать, чтобы обе функции работали. Я знаю, что текст тега привязки может фактически показать сообщение, которое я хочу использовать в качестве подсказки, но просто хочу знать, возможно ли иметь обе функции вместе

Ответ 1

На странице Обзор загрузочного Javascript:

Атрибуты данных компонента

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

Попробуйте следующее:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  <span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>

Ответ 2

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

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

Что будет работать следующим образом:

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

Но вы можете изменить его на:

$(function () {
  $('[data-tooltip="true"]').tooltip()
})

Что будет работать следующим образом:

<button type="button" class="btn btn-default" data-tooltip="true" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>