单击更改Twitter Bootstrap工具提示内容


224

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

Answers:


412

刚刚在阅读源代码的同时发现了这一点。因此$.tooltip(string)调用Tooltip该类中的任何函数。并且,如果您查看Tooltip.fixTitle,它将获取data-original-title属性并用其替换标题值。

因此,我们只需:

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

并且肯定会更新标题,即工具提示中的值。

另一种方式(请参见下面的@lukmdo评论):

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

5
谢谢!这已经困扰了一个小时。
树枝

160
甚至更短(更平滑)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
lukmdo 2012年

5
您也可以通过数据(“提示”)更改标题选项属性,看stackoverflow.com/questions/10181847/...
詹姆斯麦克马洪

4
在'fixTitle'上找不到文档,所以我想使用它不是一个好主意!...
user2846569

16
这实际上对我不起作用,工具提示会切换值,然后迅速消失。$(element).attr('data-original-title', newValue).tooltip('show');对我来说是最简单的解决方案。
Gabe O'Leary

98

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

更新:您可以添加.tooltip('show')来立即显示更改,您无需将鼠标悬停在目标上方即可将更改显示在标题上

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

5
干净的答案,为什么没有起伏:<
ays0110 2014年

3
它不会立即应用更改,您需要将鼠标
移出并移到

9
这实际上是最好的答案,您可以添加.tooltip('show');使其在更新后显示
Jared 2015年

这是唯一可行的解​​决方案(在许多尝试过的解决方案中)(bs3)。肯定是不错的解决方案!
jyoseph

3
此解决方案比其他解决方案都要好
Ayyaz Zafar

14

您可以更新工具提示文本,而无需实际调用show / hide:

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

3
这与.tooltip('show')上链的末端,为我工作。
markau

1
是的,setContentshow做的伎俩!您可以data-original-title直接更改而不是使用fixTitle
brauliobo 2015年

在Bootstrap v2.3.1上测试
里卡多

13

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

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

这样,可以在不关闭工具提示的情况下替换文本(不需要重新定位,但是如果要更改一个字等,应该没问题)。当您将鼠标悬停在+上时,它仍会更新。

**这是引导程序3,对于2,您可能必须更改数据/类名


5
$tip不是一个属性$(element)
奥古斯丁Riedinger

这样做:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
奥古斯丁·里丁格

在文本字段中键入内容时,我正在更新相邻元素上的工具提示,并且当我按某个键时,此代码对我来说工具提示消失了。
tremby 2015年

谢谢你 此解决方案的唯一问题是,它似乎在更改文本后弄乱了工具提示的位置。
Wojciech Zylinski 2015年

13

对于Bootstrap 4:

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

2
这使用了未公开的API。谨防。
Chloe

9

如果工具提示已实例化(可能使用javascript),则此方法有效:

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

7
使用bootstrap 3,它变成$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
ajbeaven

嘿,亲戚,您可以更改答案以反映评论更正吗?谢谢。
thouliha 2015年

7

对于bootstrap 3.x

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

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

Show用于立即更新标题,而无需等待工具提示被隐藏并再次显示。


7

这是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');

从UX方面,您仅看到文本已更改,没有褪色或隐藏/显示效果,并且不需要_fixTitle



6

引导程序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>


4

以下内容对我来说是最好的,基本上,我是在废弃任何现有的工具提示,并且不愿意显示新的工具提示。如果像其他答案一样在工具提示上调用show,则即使光标没有悬停在其上方,它也会弹出。

我之所以选择此解决方案,是因为其他解决方案重新使用了现有的工具提示,导致了一些奇怪的问题,即当将光标悬停在元素上方时,工具提示有时无法显示。

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

1
对此的最佳答案。
DanielMiliński2013年

@DanielMiliński谢谢:)
aknuds1 2013年

1
如果您使用boostrap3你需要使用data('bs.tooltip')的,而不是data('tooltip')
奈杰尔天使

3

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

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


我们应该在更新工具提示标题之前或之后调用$(el).tooltip('dispose')吗?
Fifi

@imabot处理旧的工具提示,然后使用新数据重新创建。如果您的工具提示很复杂,则可能需要检索或以其他方式存储初始配置,以便可以使用该配置+新值重新创建。希望有道理。
Martin Lyne '18

2

您可以使用功能在工具提示调用中设置内容

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

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


2

谢谢,这段代码对我非常有帮助,我发现它对我的项目有效

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


1

销毁任何先前存在的工具提示,以便我们可以使用新的工具提示内容重新填充

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

1

我无法获得任何答案,这是一种解决方法:

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

0

我认为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');

    }

0

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

$('.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 */);
});

0

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


0

使用工具提示对象Boostrap:

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

0

在经过数小时的搜索和试用后,对于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>


0

我只在Bootstrap 4中测试了这个,没有调用.show()

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

-1

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

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

-1

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

$(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');
});


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

如果您在使用attr'data-original-title'初始化工具提示后需要更改其文本,则非常有用。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.