我有一个包含多行和多列的html表。
<table>
<tr>
<td id="td1" class="my_tooltip"></td>
<td id="td2" class="my_tooltip"></td>
<td id="td3" class="my_tooltip"></td>
</tr>
</table>
使用Jquery UI-工具提示,每个td元素应使用以下逻辑加载不同的工具提示数据:
$(".my_tooltip").tooltip({
content: function() {
//display loading icon gif
return $('#tooltip_loading').html();
},
open: function( event, ui ){
var elem = $(this);
var id = elem.attr('id');
var el_tooltip_id = 'tooltip_' + id;
var el_tooltip = '#' + el_tooltip_id;
// Logic for caching tooltip content
if ($(el_tooltip).html() === undefined) {
// Tooltip content not rendered yet - create a new one
$("<div/>").attr('id', el_tooltip_id).appendTo($('#tooltips_container'));
$(el_tooltip).load("backend_call_with_parameter&id=" + id, function() {
elem.tooltip('option','content',$(el_tooltip).html());
}
)
} else {
// Tooltip content found - display it
elem.tooltip('option','content',$(el_tooltip).html());
}
}
}
});
}
基本上,它适用于单个回调。
但是,当用户快速将鼠标悬停在2个或更多元素上时(会调用更多回调)。回调输出中可能会有延迟,并且用户用鼠标悬停的所有工具提示元素都填充有最后一个回调输出。