Change Twitter Bootstrap Tooltip content on click

2019-01-05 08:42发布

站内问答 / jQuery
1637 23 6

I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate the tooltip after initiation?

23条回答
劫难
2楼-- · 2019-01-05 09:00

For bootstrap 3.x

This seems like cleanest solution:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Show is used to make title update right away and not wait for tooltip to be hidden and shown again.

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-01-05 09:02

you can use this code to hide the tool tip change its title and show the tooltip again, when the ajax request returns successfully.

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
4楼-- · 2019-01-05 09:03

You can just change the data-original-title using the following code:

$(element).attr('data-original-title', newValue);
查看更多
0人赞 添加讨论(0) 举报
女痞
5楼-- · 2019-01-05 09:03

This worked for me: (bootstrap 3.3.6; jquery=1.11.3)

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

The attribute data-html="true" allow to use html on the tooltip title.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
6楼-- · 2019-01-05 09:06

Just found this today whilst reading the source code. So $.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.

So we simply do:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

and sure enough, it updates the title, which is the value inside the tooltip.

Another way (see @lukmdo comment below):

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');
查看更多
0人赞 添加讨论(0) 举报
淡お忘
7楼-- · 2019-01-05 09:06

For BS4 (and BS3 with minor changes) .. after hours of searching and trials, i came up with the most reliable solution for this problem and it even solves the problem of opening more than one (tooltip or popover) at the same time, and the problem of opening automatically after losing focus, etc.

$('[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人赞 添加讨论(0) 举报
上一页 1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)