Есть ли способ назначить более одного события элементу управления начальной загрузкой через "data-toggle". Например, скажем, я хочу, чтобы кнопка имела подсказку и подсказку "button" к нему. Tried data-toggle = "кнопка подсказки", но только всплывающая подсказка работала.
EDIT:
Это легко "обходимо" с помощью
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
Если вы хотите добавить модальный и всплывающую подсказку без добавления javascript или изменения функции всплывающей подсказки, вы также можете просто обернуть вокруг нее элемент:
<span data-toggle="modal" data-target="#id">
<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>
Так как всплывающая подсказка не инициализируется автоматически, вы можете внести изменения в свою инициализацию всплывающей подсказки. Я сделал это так:
$(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.
Или просто,
$('[data-tooltip="tooltip"]').tooltip();
Пока нет. Тем не менее, было высказано предположение, что кто-то добавит эту функцию в один прекрасный день.
Следующий пример загрузки Github - отличный пример того, что вы хотите. Это возможно, но не без написания собственного кода обхода на этом этапе.
Проверьте это...: -)
Мне удалось решить эту проблему без необходимости менять разметку следующим фрагментом 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();
Я использую href для загрузки модального файла и оставляю переключатель данных для всплывающей подсказки:
<a
data-toggle="tooltip"
data-placement="top"
title="My Tooltip text!"
href="javascript:$('#id').modal('show');"
>
+
</a>
Так как Bootstrap заставляет вас инициализировать всплывающие подсказки только через Javascript, я изменил data-toggle="tooltip" (так как тогда он бесполезен) на class="bootstrap-tooltip" и использовал этот Javascript для инициализации моих подсказок:
$('.bootstrap-tooltip').tooltip();
И поэтому я был свободен использовать атрибут data-toggle для чего-то другого (например, data-toggle="button").
Только для дополнения @Романа Хольцнера ответ...
В моем случае у меня есть кнопка, которая показывает всплывающую подсказку, и она должна оставаться отключенной до тех пор, пока действия не будут выполнены. Используя его подход, модальная работа, даже если кнопка отключена, потому что ее вызов находится за пределами кнопки - я попал в файл клипа 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);
Когда вы открываете модальный тег и хотите показать всплывающую подсказку, и если вы реализуете всплывающую подсказку внутри тега, он покажет подсказку рядом с тегом. как это
Я предлагаю использовать 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>
Еще одно решение:
<a data-toggle="modal" data-target="#exampleModalCenter">
<span
class="tags"
data-toggle="tooltip"
data-placement="right"
title="Tooltip text"
>
Text
</span>
</a>