Добавить всплывающую подсказку Bootstrap 4 к динамической кнопке - PullRequest
Новая
       9

Добавить всплывающую подсказку Bootstrap 4 к динамической кнопке

0 голосов
/ 06 мая 2018

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

Например. Я использую такую ​​кнопку: 

<a href="#" class="btn btn-link">Button active</a>

Теперь возможно, что кнопка отключится и будет выглядеть так: 

<a href="#" class="btn btn-link disabled">Button disabled</a>

Я знаю, что хочу добавить всплывающую подсказку с отключенной кнопкой JS.

Я попробовал этот код: 

$('.btn-link.disabled').tooltip({
    title: '<div class="text-left">Please select color first</div>',
    html: true,
});

Это не работает. Я думаю, потому что класс disabled является новым, и скрипт для всплывающей подсказки не может найти его при загрузке страницы. Есть ли способ «перезагрузить» функцию?

1 Ответ

0 голосов
/ 06 мая 2018

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

$('.btn-link.disabled').wrap('<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Please select color first"></span>');
<a href="#" class="btn btn-link">Button active</a>

<a href="#" class="btn btn-link disabled">Button disabled</a>



<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
...