Изменить содержимое всплывающей подсказки Twitter Bootstrap - PullRequest
Новая
       26

Изменить содержимое всплывающей подсказки Twitter Bootstrap

211 голосов
/ 29 февраля 2012

У меня есть всплывающая подсказка для элемента привязки, которая отправляет запрос AJAX по щелчкуЭтот элемент имеет всплывающую подсказку (из Twitter Bootstrap).Я хочу, чтобы содержание всплывающей подсказки изменялось при успешном завершении запроса AJAX.Как я могу манипулировать всплывающей подсказкой после инициации?

Ответы [ 23 ]

0 голосов
/ 25 апреля 2013

Я думаю, что Мехмет Дюран почти прав, но были некоторые проблемы при использовании нескольких классов с одинаковыми всплывающими подсказками и их размещением.Следующий код также избегает проверки ошибок js, если есть какой-либо класс с именем «tooltip_class».Надеюсь, это поможет. 

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }
0 голосов
/ 31 октября 2018

Для BS4 (и BS3 с небольшими изменениями) .. после нескольких часов поиска и испытаний я нашел самое надежное решение этой проблемы, и оно даже решает проблему открытия более одного (всплывающая подсказка или всплывающее окно) в в то же время и проблема автоматического открытия после потери фокуса и т. д. 

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '	<li>Sherif Salah</li>';
  data += '	<li>Muhammad Salah</li>';
  data += '	<li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>
0 голосов
/ 04 августа 2015

Я не смог получить ни одного из ответов, вот обходной путь: 

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...