在点击时更改Twitter引导提示内容

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

当前回答

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

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

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

2013-01-05 17:19:05

其他回答

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

首先启用工具提示: $(“[data-toggle = "提示"]”).tooltip () 然后更改title属性，然后重新初始化工具提示

$（“#foo”）.attr（'title'，'TheNewTitle'）; $（'[data-toggle=“tooltip”]'）.tooltip（'dispose'）; $（'[data-toggle=“tooltip”]'）.tooltip（）

2021-09-08 03:25:55

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

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

通过销毁旧的工具提示来更改文本，然后创建并显示一个新的工具提示。(使旧的淡出，新的淡出)

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

我使用top方法来动画“Saving.”消息(使用&nbsp，这样工具提示的大小不会改变)，并将文本更改为“Done”。(加上填充)当请求完成。

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

2013-11-01 16:18:48

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

2016-07-04 10:30:04

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

2018-10-31 19:29:38

你可以用下面的代码更改data-original-title:

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

2015-12-20 17:26:40

在点击时更改Twitter引导提示内容

推荐文章

最新文章

标签