ajax 后引导程序中的工具提示不起作用答案

【问题标题】：the tooltip in bootstrap doesn't work after ajaxajax 后引导程序中的工具提示不起作用
【发布时间】：2015-12-03 06:40:04
【问题描述】：

我有一个名为 index.php 的文件，其中包含另一个名为 file1.php 的文件（在 index.php 中，我包含了 jQuery、js 等所需的所有文件）。在 file1.php 中，我有一个带有按钮的表格，每个按钮都打开一个模式。模式中的信息来自对 file2.php 的 ajax 调用。在 file2.php 我创建一个表。在表格中我有单元格：

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>

而且，工具提示不起作用。但是，当我将它复制到 file1.php 时，如下表所示，工具提示确实有效。

谁能帮我修复工具提示？谢谢。

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap tooltip

【解决方案1】：

我认为您需要在新到达的数据上初始化工具提示，例如

$('[data-toggle="tooltip"]').tooltip();

在 DOM 操作之后将此代码放置到您的 AJAX 成功处理程序中。

【讨论】：

答案有效，但为了进一步澄清，我将以下代码放在返回的 AJAX 页面的末尾。
在 DOM 操作之后，我将代码添加到了我的 AJAX 成功处理程序中。它起作用了，然后它没有。我很困惑为什么它并不总是有效。我有一个表单，用户可以在其中选择多个过滤器、提交表单并获取结果......并重复过程。 AJAX 运行结果查询并显示它们。在结果中，我希望一条数据充当工具提示或弹出框。它可能适用于 1 或 2 个表单提交，然后它就不起作用了。我必须重新加载主页才能使其再次工作。
@Roberto，这可能是因为您的成功函数没有被调用，而您的 ajax 正在调用错误处理程序。在完整的处理程序中调用它应该更加一致。
为我工作。 tks.
我在 jquery 数据表上有工具提示，当在成功处理程序中重新初始化表之后放置时，这对我有用。谢谢。

【解决方案2】：

我通过这样的位置设置我的工具提示：

function setUpToolTipHelpers() {
    $(".tip-top").tooltip({
        placement: 'top'
    });
    $(".tip-right").tooltip({
        placement: 'right'
    });
    $(".tip-bottom").tooltip({
        placement: 'bottom'
    });
    $(".tip-left").tooltip({
        placement: 'left'
    });
}

使用文档就绪调用对其进行初始化：

    $(document).ready(function () {
        setUpToolTipHelpers();
    });

这样我可以确定工具提示的位置，我只需要使用类和标题来分配提示：

<td class = "tip-top", title = "Some description">name</td>

然后我在我的成功 ajax 函数中调用“setUpToolTipHelpers()”。或者你也可以在完整的函数上调用它。这似乎对我很有效。

【讨论】：

【解决方案3】：

您必须将工具提示初始化放在 Ajax 回调函数中：

$.ajax({
    method: "POST",
    url: "some.php"
}).done(function( msg ) {
    $('[data-toggle="tooltip"]').tooltip();
});

-或-

而不是将初始化代码放在每个 Ajax 回调函数中您可以使用 ajaxComplete 事件全局实现它：

/* initializate the tooltips after ajax requests, if not already done */    
$( document ).ajaxComplete(function( event, request, settings ) {
    $('[data-toggle="tooltip"]').not( '[data-original-title]' ).tooltip();
});

此代码将为每个定义了 data-toggle="tooltip" 属性但没有属性 "data-original-title" 的节点初始化工具提示（即工具提示未初始化）。

【讨论】：

【解决方案4】：

您可以通过以下两种方式之一执行此操作：

您可以编写一个ajaxComplete 函数，这样每次ajax 调用完成后它都会一遍又一遍地重新初始化工具提示。这在您的大多数页面中都有数据表并希望在每次 ajax 数据表调用后初始化工具提示时很有用：

$(document).ajaxComplete(function() {
    $("[data-toggle=tooltip]").tooltip();
});

也可以在ajax成功回调后调用tooltip函数：

function tool_tip() {
    $('[data-toggle="tooltip"]').tooltip()
}

tool_tip();  // Call in document ready for elements already present

$.ajax({
    success : function(data) {
        tool_tip();  // Call function again for AJAX loaded content
    }
})

【讨论】：

【解决方案5】：

我已经尝试了所有方法，但没有任何效果。因此，我仔细查看了 click* 时的 tooltip，发现每次触发 shown.bs.tooltip 时都会出现一个 aria- describeby 属性，并且其值每次都会发生变化。

因此，我的方法（并且有效）是更改此动态元素的内容。

我得到了这个代码：

$('body').on('shown.bs.tooltip', function(e) {

    var $element = $(e.target);
    var url = $element.data('url');

    if (undefined === url || url.length === 0) {
        return true;
    }

    var $describedByContent = $('#' + $element.attr('aria-describedby')).find('.tooltip-inner');

    if ($element.attr('title').length > 1) {
        $describedByContent.html($element.attr('title'));
        return true;
    }

    $.ajax({
        url: url,
        method: 'GET',
        beforeSend: function () {
            $element.attr('title', 'Cargando... espere por favor.');
            $describedByContent.html($element.attr('title'));
        }
    }).done(function (data) {
        $element.attr('title', JSON.stringify(data));
        $describedByContent.html($element.attr('title'));
    });

    return true;
});

在我的例子中，我的工具提示有一个 data-url 属性来获取标题的数据。原来的标题是'-'，我不想每次点击*元素时都调用ajax，只是第一次。

对我来说，每次都做一个 ajax 没用，因为我不希望数据变化那么快。

动态创建的元素有一个类为 .tooltip-inner 的元素，所以我们只需要替换它的内容即可。

希望这可能会有所帮助。

*click：我选择了 click 事件，因为默认悬停有时会使系统变得疯狂，并且 show.bs.tooltip 被永远触发，在默认值和新值之间切换。 p>

【讨论】：

【解决方案6】：

在像body这样的现有元素上使用选择器

$('body').tooltip({selector: '[data-toggle="tooltip"]'});

【讨论】：

这工作得天衣无缝，在多次 ajax 调用后替换使用：$('[data-toggle="tooltip"]').tooltip()。
像魅力一样工作！
谢谢。出于某种原因，这行得通，汤姆的方法没有=/

【解决方案7】：

效果很好。

$('body').tooltip({selector: '[data-toggle="tooltip"]'});

【讨论】：

【解决方案8】：

运行

$('#ding_me_tooltip').tooltip('dispose');
$('#ding_me_tooltip').tooltip();

在 #ding_me_tooltip 是您的选择器的 ajax 之后

【讨论】：