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

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

当前回答

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

其他回答

引导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' });

2022-08-15 06:39:00

谢谢这个代码对我很有帮助，我发现它对我的项目很有效

$（element）.attr（'title'， 'message'）.tooltip（'fixTitle'）.tooltip（'show'）;

2016-01-18 22:15:50

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

更新:您可以添加.tooltip('show')来立即显示更改，您不需要鼠标移出和鼠标悬停目标来查看标题中的更改

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

2014-05-01 08:57:39

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

    }

2013-04-25 11:41:18

可以使用函数在工具提示调用中设置内容

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

你不必只使用被调用元素的标题。

2013-11-27 15:01:21

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

推荐文章

最新文章

标签