Керування завантаженням з декількома перемиканнями даних

Чи є спосіб призначити більш ніж одній події керування завантажувачем через "перемикання даних". Наприклад, скажімо, що я хочу, щоб кнопка, на якій було призначено "підказку" та перемикач "кнопка".
Спробував 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/isissue/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").

Просто для доповнення @ Роман Хольцнер відповідь ...

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