Bootstrap контроль с несколькими «data-toggle»

Так как всплывающая подсказка не инициализируется автоматически, вы можете внести изменения в свою инициализацию всплывающей подсказки. Я сделал это так:

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

с этой разметкой:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Обратите внимание на data-tooltip.

Update

Или просто,

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

Пока нет. Тем не менее, было высказано предположение, что кто-то добавит эту функцию в один прекрасный день.

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

Проверьте это...: -)

https://github.com/twitter/bootstrap/issues/7011

Мне удалось решить эту проблему без необходимости менять разметку следующим фрагментом jQuery. У меня была аналогичная проблема, когда мне нужна всплывающая подсказка на кнопке, которая уже использовала переключение данных для модального. Все, что вам нужно сделать, это добавить заголовок к кнопке.

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

Это лучшее решение, которое я только что реализовал:

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

JAVASCRIPT, который вы все равно должны включить, независимо от того, какой метод вы используете.

$('[rel="tooltip"]').tooltip(); 

Так как Bootstrap заставляет вас инициализировать всплывающие подсказки только через Javascript, я изменил data-toggle="tooltip" (так как тогда он бесполезен) на class="bootstrap-tooltip" и использовал этот Javascript для инициализации моих подсказок:

$('.bootstrap-tooltip').tooltip();

И поэтому я был свободен использовать атрибут data-toggle для чего-то другого (например, data-toggle="button").

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

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

Только для дополнения @Романа Хольцнера ответ...

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

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Итак, если вы хотите показать модальность только тогда, когда кнопка активна, вы должны изменить порядок тегов:

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Если вы хотите проверить его, измените атрибут с помощью кода JQuery:

$('button[name=delete]').attr('disabled', false);

Еще одно решение:

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>

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

Я предлагаю использовать div вне тега и использовать "display: inline-block;"

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>