PROSAGA码农传奇-Bootstrap-点击即可更改Twitter Bootstrap Tooltip内容

21 条回复

0#
回复此人
Autistic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以在不实际调用show / hide的情况下更新工具提示文本： </p> <pre> <code> $(myEl) .attr('title', newTitle) .tooltip('fixTitle') .tooltip('setContent') </code> </pre> </DIV>

编辑
1#
回复此人
biu~ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我无法得到任何答案，这是一个解决方法： </p> <pre> <code> $('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle); </code> </pre> </DIV>

编辑
2#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> for Bootstrap 4： </p> <pre> <code> $(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle"); </code> </pre> </DIV>

编辑
3#
回复此人
没身份别烦我 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $(this).attr('data-original-title', 'click here to publish') .tooltip('fixTitle') .tooltip('show'); </code> </pre> <P> 如果您需要在使用attr'data-original-title'初始化工具提示的文本后更改它，则非常有用。 </p> </DIV>

编辑
4#
回复此人
不易青年。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这对我有用:( bootstrap 3.3.6; jquery = 1.11.3） </p> <pre> <code> <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> </code> </pre> <P> 属性 <code> data-html="true" </code> 允许在工具提示标题上使用html。 </p> </DIV>

编辑
5#
回复此人
回忆氵独奏♪ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 谢谢这段代码对我很有帮助，我发现它对我的项目有效 </p> <P> <code> $(element).attr('title', 'message').tooltip('fixTitle').tooltip('show'); </code> </p> </DIV>

编辑
6#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下对我来说效果最好，基本上我正在废弃任何现有的工具提示而不打扰显示新的工具提示。如果在工具提示中像在其他答案中一样调用show，则即使光标没有悬停在其上方，它也会弹出。 </p> <P> 我采用这种解决方案的原因是，重新使用现有工具提示的其他解决方案导致了一些奇怪的问题，工具提示有时在将光标悬停在元素上方时无法显示。 </p> <pre> <code> function updateTooltip(element, tooltip) { if (element.data('tooltip') != null) { element.tooltip('hide'); element.removeData('tooltip'); } element.tooltip({ title: tooltip }); } </code> </pre> </DIV>

编辑
7#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 当ajax请求成功返回时，您可以使用此代码隐藏工具提示更改其标题并再次显示工具提示。 </p> <pre> <code> $(element).tooltip('hide'); $(element).attr('title','this is new title'); $(element).tooltip('fixTitle'); setTimeout(function() { $(element).tooltip('show');}, 500); </code> </pre> </DIV>

编辑
8#
回复此人
哇。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您想在不关闭并重新打开工具提示的情况下更改文本，那么这是一个很好的解决方案。 </p> <pre> <code> $(element).attr('title', newTitle) .tooltip('fixTitle') .data('bs.tooltip') .$tip.find('.tooltip-inner') .text(newTitle) </code> </pre> <P> 这样，文本被替换而没有关闭工具提示（没有重新定位，但如果你正在做一个单词改变等应该没问题）。当你将鼠标悬停在工具提示上时，它仍会更新。 </p> <P> **这是bootstrap 3，对于2你可能需要更改数据/类名 </p> </DIV>

编辑
9#
回复此人
庸人自扰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Bootstrap 3中，调用就足够了 <code> elt.attr('data-original-title', "Foo") </code> 作为改变 <code> "data-original-title" </code> 属性已触发工具提示显示中的更改。 </p> <P> 的<strong> 更新： </强> 您可以添加.tooltip（'show'）来立即显示更改，您无需鼠标移除和鼠标悬停目标以查看标题中的更改 </p> <pre> <code> elt.attr('data-original-title', "Foo").tooltip('show'); </code> </pre> </DIV>

编辑
10#
回复此人
句号了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用函数在工具提示调用上设置内容 </p> <pre> <code> $("#myelement").tooltip({ "title": function() { return "<h2>"+$("#tooltipcontainer").html()+"</h2>"; } }); </code> </pre> <P> 您不必仅使用被调用元素的标题。 </p> </DIV>

编辑
11#
回复此人
Mystery☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 刚刚在阅读源代码时发现了这一点。所以 <code> $.tooltip(string) </code> 调用内的任何函数 <code> Tooltip </code> 类。如果你看看 <code> Tooltip.fixTitle </code> ，它取得了 <code> data-original-title </code> 属性并用它替换标题值。 </p> <P> 所以我们干脆做到： </p> <pre> <code> $(element).tooltip('hide') .attr('data-original-title', newValue) .tooltip('fixTitle') .tooltip('show'); </code> </pre> <P> 果然，它会更新标题，这是工具提示中的值。 </p> <P> 另一种方式（见下面的@lukmdo评论）： </p> <pre> <code> $(element).attr('title', 'NEW_TITLE') .tooltip('fixTitle') .tooltip('show'); </code> </pre> </DIV>

编辑
12#
回复此人
誓言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 销毁任何预先存在的工具提示，以便我们可以使用新的工具提示内容重新填充 </p> <pre> <code> $(element).tooltip("destroy"); $(element).tooltip({ title: message }); </code> </pre> </DIV>

编辑
13#
回复此人
仙风道骨刘憨憨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于bootstrap 3.x </p> <P> 这似乎是最干净的解决方案： </p> <pre> <code> $(element) .attr('data-original-title', 'New title').tooltip('show') </code> </pre> <P> Show用于立即更新标题，而不是等待隐藏工具提示并再次显示。 </p> </DIV>

编辑
14#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我正在使用这个简单的方法： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $(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'); }); </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
15#
回复此人
无思 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果工具提示已实例化（可能使用javascript），则此方法有效： </p> <pre> <code> $("#tooltip_id").data('tooltip').options.title="New_value!"; $("#tooltip_id").tooltip('hide').tooltip('show'); </code> </pre> </DIV>

编辑
16#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> Bootstrap 4 </H1> <pre> <code> $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show') </code> </pre> <P> <a href="https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose" rel="noreferrer"> https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose </A> </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $('#topic_1').tooltip({title: 'Hello'}).tooltip('show'); setTimeout( function() { $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show'); }, 5000); </code> </pre> <pre class="snippet-code-css lang-css prettyprint-override"> <code> #topic_1 { border: 1px solid red; margin: 50px; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <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> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
17#
回复此人
明月清风上善若水自由如风 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在bootstrap 4我只是使用 <code> $(el).tooltip('dispose'); </code> 然后像往常一样重新创建。因此，您可以将dispose置于创建工具提示的函数之前，以确保它不会加倍。 </p> <P> 必须检查状态并修改值似乎不太友好。 </p> </DIV>

编辑
18#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为Mehmet Duran几乎是正确的，但是在使用具有相同工具提示及其位置的多个类时存在一些问题。如果有任何名为“tooltip_class”的类，以下代码也可以避免js错误检查。希望这可以帮助。 </p> <pre> <code> if (jQuery(".tooltip_class")[0]){ jQuery('.tooltip_class') .attr('title', 'New Title.') .attr('data-placement', 'right') .tooltip('fixTitle') .tooltip('hide'); } </code> </pre> </DIV>

编辑
19#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于BS4（和BS3有微小的变化）..经过几个小时的搜索和试验，我想出了解决这个问题的最可靠的解决方案，它甚至解决了同时打开多个（工具提示或弹出窗口）的问题，失去焦点等后自动打开的问题 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $('[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); }); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <!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> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论