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


当前回答

Bootstrap 4:

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

其他回答

我不能得到任何答案工作,这里有一个变通办法:

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

这对我来说很有效:(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。

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

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

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

引导5.2.0

Bootstrap版本5.2.0现在有setContent方法在初始化后更改工具提示标题。https://getbootstrap.com/docs/5.2/components/tooltips/#methods

var tooltip = bootstrap.Tooltip.getInstance('#elementId');
tooltip.setContent({ '.tooltip-inner': 'another title' });