Question

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

ResourceMethod

而且，工具提示不起作用。但是，当我复制它并将其传递给file1.php时，在表格下方，工具提示确实有效。

任何人都可以帮我修复工具提示吗？ THX。

Answer 1

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

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

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

Answer 2

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

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

Answer 3

我已经尝试了一切，但对我没有任何帮助。因此，我在单击*时仔细查看了工具提示，发现每次触发show.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会永远触发，从而在默认值和新值之间切换。

>

Answer 4

我按照这样的位置设置我的工具提示：

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>

然后我打电话，＆＃34; setUpToolTipHelpers（）＆＃34;在我的成功ajax功能。或者你也可以在完整的功能上调用它。这似乎对我有用。

Answer 5

您将必须将工具提示初始化放入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”属性（即未初始化工具提示）的节点初始化工具提示。

Answer 6

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

您可以编写ajaxcomplete函数，以便在每个ajax调用之后。当您的大多数页面中都有数据表，并希望在每次ajax数据表调用后初始化工具提示时，此功能很有用：

$（document）.ajaxComplete（function（）{
```
      $("[data-toggle="tooltip"]").tooltip();
    });
```
或者您可以在ajax成功回调之后调用tooltip函数：

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

tool_tip（）; //调用文档中已经存在的元素

$。ajax（{ 成功：功能（数据）{
```
    tool_tip();  // Call function again for AJAX loaded content
}
```
}）

Answer 7

这很好用。

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

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

7 个答案: