2015-10-07 4 views
1

Решено. Код будет отражать изменения (и комментарии)bootstrap Tooltip Туры Открыть (IE, Firefox)

Сначала я попытаюсь описать проблему, а затем предоставить детали.

Я использую всплывающую подсказку bootstrap для отображения некоторого текста при зависании над элементом данных таблицы под одним столбцом в таблице. Чтобы перейти к этой таблице, перейдите к ней, щелкнув элемент в раскрывающемся списке. После того, как вы выбрали элемент раскрывающегося списка, если вы случайно совпадаете с мышью над элементом таблицы, который имеет всплывающую подсказку при визуализации таблицы/страницы, всплывающая подсказка остается открытой/застрявшей на странице (в IE и Firefox только).

Ниже приведен JavaScript, который отображает таблицу и создает всплывающие подсказки. Я использую KendoGrid для генерации и отслеживания информации, извлекаемой из базы данных. jQuery, bootstrap, knockout и 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 }); 
} 
+0

Я предполагаю, что скрытие подсказки подсказки требует события onmouseleave в ядре bootstrap. Поскольку элемент уже исчез, всплывающая подсказка остается открытой. В основном я пишу пользовательский JS funtion, чтобы удалить все видимые элементы подсказки из тела и вызвать его почти во всех событиях нажатия кнопки. – Noldor

+0

Не могли бы вы подробнее остановиться? Как элемент исчез, когда он еще не появился? ... Или это связано с другой проблемой, когда моя таблица дважды отображается, и, как вы сказали, этот элемент ушел, а другой (хотя и с тем же содержимым) занял свое место. – Chris

ответ

0

Я понял это. Это было проблемой, когда кэш сохранял содержимое предыдущей таблицы, прежде чем повторно проиндексировать информацию. Мне пришлось вручную вызвать destroy во всплывающей подсказке, чтобы такие сценарии не возникали до обновления моей таблицы.

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

Я обновлю свой код выше, чтобы отразить это.