Это будет немного зависеть от того, как реализована подсказка. Каждая сторонняя подсказка JavaScript "Fancy" будет действовать по-своему. Приведенный здесь пример просто показывает, как взять две части данных (марку и модель) и вставить их в атрибут «title» ячейки, что вызовет встроенные в браузер всплывающие подсказки.
Я предполагаю, что вы собираетесь использовать плагин всплывающей подсказки или что-то подобное, поэтому вам придется взять общие принципы примера и адаптировать их к конкретной подсказке. Хорошо, достаточно преамбулы.
-
Это все произойдет в fnRowCallback [обновление: 1.10 forward использует просто rowCallback]] , которое является свойством объекта DataTables, которое вы можете установить во время инициализации. Таким образом, при рендеринге каждой строки у вас есть возможность изменить HTML-код (nRow) и вернуть его после модификации, чтобы его можно было вставить в DOM.
(примечание: когда это помогает удобочитаемости, я стремлюсь создавать больше переменных, чем это строго необходимо. Я также держу iDisplayIndex и iDisplayIndexFull на месте. Вы сможете удалить их, если хотите)
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var theMake = aData[1],
theModel = aData[2];
var imgTag = '<img href="/images/icon.png" title="' + theMake + ' ' + theModel + '" class="hoverImage"/>';
/* result example: <img href="/images/icon.png" title="Honda CRV" class="hoverImage"/> */
$('td:eq(3)', nRow).html(imgTag); // replace the word "data" with the new image markup
return nRow;
}
Теперь при наведении курсора на всплывающую подсказку будет выведено «Марка и модель».
Опять же, это ничего не делает для конкретного плагина всплывающей подсказки, хотя вы можете использовать плагин, который также получает информацию из заголовка, что было бы удобно. Для этих плагинов вам просто нужно добавить класс в imageTag (class = "tooltip" или любой другой), который запускает плагин.
[обновление]
Итак, используя в качестве примера диалоговое окно пользовательского интерфейса jQuery: многие пользовательские диалоговые функции на лету создают «контейнерный» узел, а затем вызывают на нем dialog(). Я предпочитаю иметь базовый контейнерный узел многократного использования в базовом документе, а затем заполнять его при необходимости.
Мне нравится помещать мой прямо перед тем, как тело закрывается, потому что именно здесь пользовательский интерфейс jQuery прикрепит его, когда вы все равно покончили с этим:
<!-- ... -->
<div id="dialogContainer"></div>
</body>
В вашем CSS вы бы установили его скрытым по умолчанию (#dialogContainer { display:none }).
Теперь, когда у вас есть контейнер, вы можете использовать на нем функцию .dialog(). Используя приведенный выше исходный пример (обратите внимание, что я добавил к нему класс "hoverImage"), вы должны заполнить aData [3] в заголовке изображения, а не в моем примере. Заголовок действует как «хранилище» для данных aData [3].
Теперь, полностью вне инициализации DataTables, в вашей функции готовности документа (у вас, вероятно, она уже есть), вы можете связать событие mouseenter:
$('#tableContainer').on('mouseenter', '.hoverImage', function(e) {
e.preventDefault; // if you want to prevent the browser tooltip
var dialogContainer = $('#dialogContainer');
dialogContainer.html(this.title); // replace contents of dialog with the title of the image
dialogContainer.dialog({ /* options */ });
});