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

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

当前回答

你可以用下面的代码更改data-original-title:

$(element).attr('data-original-title', newValue);

2015-12-20 17:26:40

其他回答

$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

如果你需要在使用attr 'data-original-title'初始化一个工具提示后更改它的文本，这很有用。

2018-08-07 06:51:45

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

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

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

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

2013-12-20 23:35:12

想改变工具提示内容/标题点击像引导文档。你注意到你复制了一个代码示例吗?我在这里使用Bootstrap v5…

<span id="tooltip" class="btn btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="top"
title="Tooltip content">Tooltip</span>

在进行下一步之前，请确保已启用Bootstrap5工具提示

$('#tooltip').click(function() {
  $(this).attr('data-original-title', 'Content changed!').tooltip('show');
  $(this).attr('data-original-title', 'Tooltip content');
});

当您将鼠标悬停在这个span元素上时，它将显示工具提示内容。当你点击它，这将改变内容更改!并将返回默认标题Tooltip内容。

2021-11-10 21:04:28

在bootstrap 4中，我只使用$(el).tooltip('dispose');然后像往常一样重新创建。所以你可以把dispose放在创建工具提示的函数之前，以确保它不会折叠。

不得不检查状态和修补值似乎不太友好。

2018-04-16 22:42:04

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

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

推荐文章

最新文章

标签