在点击时更改Twitter引导提示内容

我在一个锚元素上有一个工具提示，它在单击时发送AJAX请求。该元素有一个工具提示(来自Twitter Bootstrap)。我希望在AJAX请求成功返回时改变工具提示内容。启动后如何操作工具提示?

当前回答

如果你想在不关闭和重新打开工具提示的情况下更改文本，这里有一个很好的解决方案。

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

这样，文本替换而不关闭工具提示(不重新定位，但如果你正在做一个词的改变等应该是好的)。当你将鼠标悬停在工具提示上时，它仍然在更新。

**这是bootstrap 3，对于2，你可能需要改变数据/类名

2013-12-20 23:35:12

其他回答

我用ajax动态更改工具提示中的标题。

首先启用工具提示: $(“[data-toggle = "提示"]”).tooltip () 然后更改title属性，然后重新初始化工具提示

$（“#foo”）.attr（'title'，'TheNewTitle'）; $（'[data-toggle=“tooltip”]'）.tooltip（'dispose'）; $（'[data-toggle=“tooltip”]'）.tooltip（）

2021-09-08 03:25:55

谢谢这个代码对我很有帮助，我发现它对我的项目很有效

$（element）.attr（'title'， 'message'）.tooltip（'fixTitle'）.tooltip（'show'）;

2016-01-18 22:15:50

对于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>

2018-10-31 19:29:38

今天在阅读源代码时发现了这个。因此$. Tooltip (string)调用Tooltip类中的任何函数。如果你看工具提示。fixTitle，它获取data-original-title属性并用它替换title值。

所以我们简单地做:

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

当然，它会更新标题，也就是工具提示中的值。

更短的方法:

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');

2012-03-26 15:58:05

Bootstrap 5不再有fixTitle或_fixTitle，所以我不得不处理整个Tooltip对象并重建它:

$('a.copy').click(function() {
    var tt = bootstrap.Tooltip.getInstance(this);
    tt.dispose();
    this.setAttribute('title', 'Copied!')
    tt = bootstrap.Tooltip.getOrCreateInstance(this);
    tt.show();
}

2021-10-18 14:47:30

在点击时更改Twitter引导提示内容

推荐文章

最新文章

标签