引导工具提示保持打开状态（IE、Firefox）答案

【问题标题】：bootstrap Tooltip Stays Open (IE, Firefox)引导工具提示保持打开状态（IE、Firefox）
【发布时间】：2015-10-07 14:47:59
【问题描述】：

已解决。代码将反映变化（并有 cmets）

我将尝试先简明扼要地描述问题，然后再提供详细信息。

当我将鼠标悬停在表格中单个列下的表格数据元素上时，我正在使用引导程序的工具提示来显示一些文本。要访问此表，您可以通过单击下拉列表下的项目导航到该表。选择下拉项后，如果您在呈现表格/页面时将鼠标巧合地悬停在具有工具提示的表格元素上，则工具提示保持打开/停留在页面上（在 IE 和 Firefox）。

以下是呈现表格并生成工具提示的 JavaScript。我正在使用 KendoGrid 生成并跟踪从数据库中提取的信息。 jQuery、bootstrap、knout 和 Kendo 是这个网页前端的基础。

有什么我可以重新格式化来解决这个问题的吗？或者任何地方的已知解决方法？感谢所有输入。谢谢！

JavaScript

var createGrid = function () {
    $('#AvailableAttachments').html('').kendoGrid({
        columns: self.AvailableColumns(),
        dataSource: {
            data: [],
            sort: self.Type() == 'Labor' ? { field: 'Description', dir: 'asc' } : { field: 'ReferenceNumber', dir: 'asc' }
        },
        selectable: true,
        sortable: true,
        scrollable: true,
        resizable: true,
        change: self.AttachmentGridChange,
        dataBound: self.availableGridDataBound
    });
};

var updateGrid = function () {
    /*Destroy all previous table's tooltips*/
    $.each($('#AvailableAttachments').data('kendoGrid').table.find('tr'), function (i, row) {
        $(row).find('td.hoverDescription').tooltip('destroy');
    });

    createGrid();
    var selectedCategory = {
        /*Grab some parameters*/
    };

    app.ajaxLoadingPanel = '#AvailableAttachments .k-grid-content';
    $.getJSON(app.baseUrl + self.Type.peek() + 'Attachment/Get', selectedCategory, function (data) {
        var oldSort = $('#AvailableAttachments').data('kendoGrid').dataSource._sort;
        var newDS = new kendo.data.DataSource();
        newDS.data(data);
        if (typeof oldSort != 'undefined' && oldSort.length > 0) {
            newDS.sort(oldSort[0]);
        }
        $('#AvailableAttachments').data('kendoGrid').setDataSource(newDS);
        filterFavorites();
        $('#btnEditPart').prop('disabled', true);
        $('#btnDeletePart').prop('disabled', true);

        $.each($('#AvailableAttachments').data('kendoGrid').table.find('tr'), function (i, row) {
            generateToolTip(row);
        });
    });
}

function generateToolTip(row) {

    var description = /*Do some parsing to get the information to display*/
    ...
    ...
    $(row).find('td.hoverDescription').attr('data-original-title', description);
    $(row).find('td.hoverDescription').tooltip({ container: '#AttDescriptionToolTip', placement: 'left', html: true, opacity: 0.7 });
}

【问题讨论】：

我猜工具提示隐藏需要引导核心中的“onmouseleave”事件。由于元素已经消失，工具提示保持打开状态。我主要编写一个自定义 JS 函数来从正文中删除所有可见的工具提示元素，并在几乎每个按钮单击事件中调用它。
您介意详细一点吗？尚未出现的元素是如何消失的？ ...或者它植根于一个不同的问题，我的表格渲染了两次，因此就像你说的那样，那个元素消失了，另一个元素（尽管内容相同）取而代之。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

我想通了。这是缓存在重新呈现信息之前保留前一个表的内容的问题。我必须在工具提示上手动调用 destroy 以便在更新我的表之前不会发生这种情况。

$('row').find('td.hoverDescription').tooltip('destroy');

我将更新上面的代码以反映这一点。

【讨论】：