bootstrap工具提示保持打开(IE、Firefox)

bootstrap Tooltip Stays Open (IE, Firefox)

本文关键字:IE Firefox 工具提示 bootstrap      更新时间:2023-09-26

已解决。代码将反映更改(并有注释(

我将尝试先简明扼要地描述这个问题,然后提供细节。

当鼠标悬停在表中单列下的表数据元素上时,我使用bootstrap的工具提示来显示一些文本。要访问此表,您可以通过单击下拉列表下的项目来导航到此表。选择下拉项后,如果在渲染表/页面时,鼠标恰好悬停在具有工具提示的表元素上,则工具提示将保持打开/停留在页面上(仅在IEFirefox中(。

下面是渲染表和生成工具提示的JavaScript。我使用KendoGrid生成并跟踪从数据库中提取的信息。jQuery、bootstrap、knocket和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 });
}

我想明白了。这是缓存在重新提交信息之前保留上一个表的内容的问题。我不得不在工具提示上手动调用destroy,这样在更新表之前就不会出现这种情况。

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

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