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

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

РЕДАКТИРОВАТЬ:

Это легко "обойти" с

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Если вы хотите добавить модальные и всплывающие подсказки без добавления JavaScript или изменения функции всплывающей подсказки, вы также можете просто обернуть вокруг нее элемент:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </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();

Мне удалось решить эту проблему без необходимости изменять какую-либо разметку с помощью следующего фрагмента 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(); 

Еще нет. Тем не менее, было предложено, чтобы кто-то добавил эту функцию однажды.

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

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

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

Я использую 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").

Просто для дополнения @Roman Holzner ответ ...

В моем случае у меня есть кнопка, которая показывает всплывающую подсказку, и она должна оставаться отключенной до дальнейших действий. Используя его подход, модал работает, даже если кнопка отключена, потому что ее вызов находится вне кнопки - я в файле лезвия 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>

Есть хорошее решение с использованием класса .stretched-link. Кнопка должна иметь класс .position-relative. Вот полный рабочий пример:

Подсказка должна быть добавлена ​​к кнопке, иначе ее положение будет неправильным.

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

/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

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

Я предлагаю использовать 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="tooltip" data-placement="top" title="My Tooltip text!">+</a>