单击时更改 Twitter 引导工具提示内容

Posted 2023-05-08

技术标签:

【中文标题】单击时更改 Twitter 引导工具提示内容【英文标题】：Change Twitter Bootstrap Tooltip content on click 【发布时间】：2012-03-19 02:30:05 【问题描述】：

我在锚元素上有一个工具提示，它在点击时发送 AJAX 请求。这个元素有一个工具提示（来自 Twitter Bootstrap）。我希望在 AJAX 请求成功返回时更改工具提示内容。启动后如何操作工具提示？

【问题讨论】：

【参考方案1】：

今天在阅读源代码时发现了这个。所以$.tooltip(string) 调用Tooltip 类中的任何函数。如果您查看Tooltip.fixTitle，它会获取data-original-title 属性并用它替换标题值。

所以我们只需这样做：

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

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

更短的方法：

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

【讨论】：

也可以通过data('tooltip').options属性改变标题，见***.com/questions/10181847/… 找不到关于“fixTitle”的文档，所以我想使用它不是一个好主意！？ ... 这实际上对我不起作用，工具提示切换了值，然后很快消失了。 $(element).attr('data-original-title', newValue).tooltip('show'); 对我来说是最简单的工作解决方案。 @fsasvari in bootstrap 4 只需将其更改为 '_fixTitle' Bootstrap 4 - 如下所述 - 使用 .tooltip('update');【参考方案2】：

在 Bootstrap 3 中，调用 elt.attr('data-original-title', "Foo") 就足够了，因为 "data-original-title" 属性的变化已经触发了工具提示显示的变化。

更新：您可以添加 .tooltip('show') 以立即显示更改，您无需 mouseout 和 mouseover 目标即可看到标题的更改

elt.attr('data-original-title', "Foo").tooltip('show');

【讨论】：

它不会立即应用更改，您需要 mouseout 和 mouseover 目标才能看到新的标题文本这其实是最好的答案，你可以添加.tooltip('show');让它在更新后显示这是唯一可行的解决方案（在许多尝试中）（bs3）。不错的解决方案！这个解决方案比其他所有解决方案都好为什么当我在'Foo' 周围的第二个参数中使用单引号时它不起作用，比如.attr('data-original-title', 'Foo') ??【参考方案3】：

以下是 Bootstrap 4 的更新：

var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

但最好的方法是这样做：

var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

或内联：

var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');

从用户体验方面，您只是看到文本已更改，没有褪色或隐藏/显示效果，也不需要_fixTitle。

【讨论】：

该解决方案对我有用，谢谢！一般来说，请注意您只能更新已启用的工具提示。因此，如果您手动禁用了工具提示，则必须在更新之前使用 elt.tooltip('enable') 重新启用它。【参考方案4】：

您可以在不实际调用 show/hide 的情况下更新工具提示文本：

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

【讨论】：

这个，.tooltip('show') 在链的末端，对我有用。是的，setContent 和 show 成功了！您可以直接更改data-original-title 而不是使用fixTitle 在 Bootstrap v2.3.1 上测试【参考方案5】：

对于引导程序 4：

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

【讨论】：

这使用了未记录的 API。当心。【参考方案6】：

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

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

这样，在不关闭工具提示的情况下替换文本（不会重新定位，但如果你正在做一个单词更改等应该没问题）。当您将鼠标悬停在工具提示上时，它仍然会更新。

**这是引导程序 3，对于 2，您可能需要更改数据/类名

【讨论】：

说$tip 不是$(element) 的属性做到了吗：$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle); 在文本字段中键入内容时，我正在更新相邻元素的工具提示，而当我按下某个键时，该代码对我来说工具提示消失了。谢谢。此解决方案的唯一问题是它似乎在文本更改后弄乱了工具提示的位置。【参考方案7】：

如果工具提示已被实例化（可能使用 javascript），则此方法有效：

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

【讨论】：

使用bootstrap 3，它变成$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!'; 嘿关系，你能改变你的答案来反映 cmets 更正吗？谢谢。【参考方案8】：

引导程序 4

$('#topic_1').tooltip('dispose').tooltip(title: 'Goodbye').tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip(title: 'Hello').tooltip('show');
setTimeout( function() 
  $('#topic_1').tooltip('dispose').tooltip(title: 'Goodbye').tooltip('show');
, 5000);

#topic_1 
  border: 1px solid red;
  margin: 50px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>

【讨论】：

这感觉是最干净的解决方案。【参考方案9】：

对于引导程序 3.x

这似乎是最干净的解决方案：

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

显示用于立即更新标题，而不是等待工具提示被隐藏并再次显示。

【讨论】：

【参考方案10】：

您可以使用以下代码更改data-original-title：

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

【讨论】：

【参考方案11】：

以下对我来说效果最好，基本上我正在废弃任何现有的工具提示，而不是费心显示新的工具提示。如果像其他答案一样在工具提示上调用 show ，即使光标没有悬停在它上面，它也会弹出。

我选择这个解决方案的原因是其他解决方案，重新使用现有的工具提示，导致了一些奇怪的问题，当将光标悬停在元素上方时，工具提示有时不显示。

function updateTooltip(element, tooltip) 
    if (element.data('tooltip') != null) 
        element.tooltip('hide');
        element.removeData('tooltip');
    
    element.tooltip(
        title: tooltip
    );

【讨论】：

此问题的最佳答案。如果你使用boostrap3，你需要使用data('bs.tooltip')而不是data('tooltip')【参考方案12】：

在 bootstrap 4 中，我只使用 $(el).tooltip('dispose'); 然后照常重新创建。因此，您可以将 dispose 放在创建工具提示的函数之前，以确保它不会加倍。

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

【讨论】：

我们应该在更新工具提示标题之前还是之后调用 $(el).tooltip('dispose') ？ @imabot 处理旧工具提示，然后使用新数据重新创建。如果您的工具提示很复杂，您可能想要检索或以其他方式存储初始配置，以便您可以使用该配置 + 新值重新创建。希望这是有道理的。【参考方案13】：

您可以使用函数在工具提示调用上设置内容

        $("#myelement").tooltip(
            "title": function() 
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            
        );

您不必只使用被调用元素的标题。

【讨论】：

【参考方案14】：

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

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

【讨论】：

【参考方案15】：

销毁任何预先存在的工具提示，以便我们可以重新填充新的工具提示内容

$(element).tooltip("destroy");    
$(element).tooltip(
    title: message
);

【讨论】：

【参考方案16】：

我无法得到任何有效的答案，这里有一个解决方法：

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

【讨论】：

【参考方案17】：

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

【讨论】：

【参考方案18】：

我只在 bootstrap 4 中测试过这个并且没有调用 .show()

el.tooltip('hide').attr('data-original-title', 'message');

【讨论】：

【参考方案19】：

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

首先启用工具提示：

$('[data-toggle="tooltip"]').tooltip()

然后改变title属性，然后重新初始化tooltip

$("#foo").attr('title','TheNewTitle');
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip()

【讨论】：

【参考方案20】：

我认为 Mehmet Duran 几乎是对的，但是在使用具有相同工具提示及其位置的多个类时会出现一些问题。以下代码还避免了 js 错误检查是否有任何名为“tooltip_class”的类。希望这会有所帮助。

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

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

【讨论】：

【参考方案21】：

通过直接更改元素中的文本来更改文本。（不更新工具提示位置）。

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

通过销毁旧的工具提示来更改文本，然后创建并显示一个新的。（导致旧的淡出，新的淡入）

$element
.tooltip('destroy')
.tooltip(
    // Repeat previous options.
    title: newText,
)
.tooltip('show');

我正在使用 top 方法为“保存”设置动画。消息（使用&nbsp，因此工具提示的大小不会改变）并将文本更改为“完成”。（加上填充）请求完成时。

$element.tooltip(
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function()
    var text = $('.tooltip-inner', parent).html();
    switch(text) 
    case 'Saving.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    
    $('.tooltip-inner', parent).html(text);
, 250);

send_request( function()
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() 
        $element.tooltip('hide');
    , 1500 /* Show "Done." for a bit */);
);

【讨论】：

【参考方案22】：

这对我有用：(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>

data-html="true" 属性允许在工具提示标题上使用 html。

【讨论】：

【参考方案23】：

使用 Tooltip 对象 Boostrap ：

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

【讨论】：

【参考方案24】：

如果您在 HTML 中设置了 title 属性，则在单击图标或按钮时使用 $(this).attr('title',newValue);

【讨论】：

【参考方案25】：

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();

【讨论】：

【参考方案26】：

想要像引导文档一样更改工具提示内容/标题onclick。当您在那里复制代码示例时，您注意到了吗？我在这里使用 Bootstrap v5...

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

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

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

当您将鼠标悬停在此 span 元素上时，它将显示 工具提示内容。当您点击它时，这将变为 Content changed! 并将返回默认标题 Tooltip content。

【讨论】：

【参考方案27】：

当ajax请求成功返回时，您可以使用此代码隐藏工具提示更改其标题并再次显示工具提示。

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function()   $(element).tooltip('show');, 500);

【讨论】：

【参考方案28】：

我正在使用这种简单的方法：

$(document).ready(function() 
    $("#btn").prop('title', 'Click to copy your shorturl');
);

function myFunction()
  $(btn).tooltip('hide');
  $(btn).attr('data-original-title', 'Test');
  $(btn).tooltip('show');
);

【讨论】：

【参考方案29】：

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

如果您需要在使用 attr 'data-original-title' 进行初始化后更改工具提示的文本，则很有用。

【讨论】：

以上是关于单击时更改 Twitter 引导工具提示内容的主要内容，如果未能解决你的问题，请参考以下文章

Twitter Bootstrap 工具提示：鼠标按下时闪烁

引导工具提示应在更改选择框上启用

当用户专注于工具提示内容时，不要隐藏引导工具提示

Twitter Bootstrap 弹出框/工具提示错误与移动设备？

如何更改 Twitter Bootstrap 工具提示的宽度和高度？

将 twitter 引导程序与 Django 表单一起使用