堆栈内存溢出
  繁体   English   中英

无法更改引导工具提示标题

[英]Can't change bootstrap Tooltip title

 原文  2015-12-31 04:27:33  7   8    javascript/ jquery/ css/ twitter-bootstrap

问题描述

我已经查看了几篇关于堆栈溢出的帖子，几乎提出了完全相同的问题，但我在这些问题上发现的内容都没有帮助。 我对 JQuery 和 Bootstrap 很陌生，所以也许我只是错过了一些非常简单的东西。

我希望能够在第一次初始化后更改不同元素的工具提示标题（最好在初始化后多次更改。）我正在处理的简化版本：

<canvas id="bag0"  data-toggle="tooltip" title="test">
</canvas>
...
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

$(document).ready(function(){
            $('#bag0').data('tooltip',false)          
                  .tooltip({ title: 'new text'});
            $('[data-toggle="tooltip"]').tooltip();

});

这种更改标题的方法是从发布中给出的： How to overwrite twitter bootstrap tooltip?

工具提示始终显示为“测试”。 我修改了其他一些东西但无济于事。 我怀疑我忽略了一些明显的东西。

8 个解决方案

解决方案1
 25  2015-12-31 04:37:04

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

上面的代码可能对你有帮助。

$.tooltip(string) 调用 Tooltip 类中的任何函数。 如果您查看 Tooltip.fixTitle，它会获取 data-original-title 属性并用它替换标题值。

您可以使用元素 ID 或类使其更具体。

  • 帮助：）

解决方案2
 11  2017-09-21 13:31:08

试试这个

$(element).tooltip().attr('data-original-title', "new title");

来源： github bootstrap 问题

解决方案3
 7  2018-09-13 19:49:53

引导程序 4

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


 $('#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>

解决方案4
 5  2019-10-21 03:03:06

更改 Bootstrap 4 工具提示标题

 $(document).ready(function() { // initilizing Tooltip $('[data-toggle="tooltip"]').tooltip(); // Get the Tooltip let btn_tooltip = $('#my-btn'); // Change Tooltip Text on mouse enter btn_tooltip.mouseenter(function () { btn_tooltip.attr('title', 'Default Tooltip').tooltip('dispose'); btn_tooltip.tooltip('show'); }); // Update Tooltip Text on click btn_tooltip.click(function () { btn_tooltip.attr('title', 'Modified Tooltip').tooltip('dispose'); btn_tooltip.tooltip('show'); }); });
 <,DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min:js"></script> </head> <body> <div class="container-fluid"> <p>Click the button:</p> <button id="my-btn" type="button" class="btn btn-primary" data-toggle="tooltip" title="Default tooltip">Click Me</button> </div> </body> </html>

解决方案5
 1 已采纳  2015-12-31 04:30:34

这可能有帮助

$('[data-toggle="tooltip"]').attr("title","NEW TEXT");

如果你想为一个特定的元素，说一个<div>

$('div[data-toggle="tooltip"]').attr("title","NEW TEXT");

解决方案6
 1  2019-10-10 09:44:20

尝试以下， 

 $(document).ready(function(){ $('#bag0').attr('title', 'new text').tooltip('destroy') // if you are using BS4 use.tooltip('dispose').tooltip({ title: 'new text'}); $('[data-toggle="tooltip"]').tooltip('show'); });
 <canvas id="bag0" data-toggle="tooltip" title="test"> </canvas> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

解决方案7
 0  2019-05-20 03:17:17

我可能有点太晚了，但我的解决方案是更改数据原始标题

$('.sample').attr('data-original-title': 'new title');

这会自动更改引导工具提示标题。

解决方案8
 0  2021-09-08 03:20:54

我有一个类似案例的解决方案。 我使用 ajax 动态更改工具提示中的标题。

  • 首先启用工具提示：

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 启用JQuery工具提示时无法更改标题 我无法使用jQuery更改工具提示引导程序的位置 存在ToolTip属性时更改Bootstrap弹出窗口标题 Bootstrap 5 使用 Javascript 更新工具提示标题 无法更改 Apexcharts 中的工具提示 y 格式化程序 Bootstrap 3 - 如何使用javascript / jquery更改显示为工具提示的超链接标题文本？ 为什么我的 Bootstrap 工具提示的标题只随着 jQuery 中的 keydown 事件改变一次？ 如何更改 hover 上的 Bootstrap 5 工具提示背景颜色？ 在Bootstrap中将元素内容显示为工具提示的标题 是否可以将文本文件加载到引导工具提示标题？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM