我正在尝试使用jquery的toolTip来显示鼠标悬停内容。但不是title =“...”内容,我希望它显示DIV内容。它应该是模块化的......
这就是我想出的。它不太有用......它只适用于第一个实例。
$(function () {
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$('.toolTipHTML').attr('title', function(){
var ele = $(this).attr('data-ttipcontent');
return $('.' + ele + '_content').remove().html()
})
$('.toolTipHTML').tooltip({
tooltipClass: "stdTooltip",
items: '*:not(.ui-dialog-titlebar-close)',
show: {
duration: 0,
},
hide: { effect: "fade", duration: 100 },
position: { my: "left top", at: "left bottom" }
});
});
上面的代码改编自我在这里找到的代码。但是这个例子不够模块化,不足以满足我的需求。 http://forum.jquery.com/topic/get-jquery-ui-tooltip-to-show-div-content
谢谢,
答案 0 :(得分:1)
它仅适用于第一个,因为您在第一个循环后删除了内容元素。改为使用hide。
return $('.' + ele + '_content').hide().html();
答案 1 :(得分:1)
它仅适用于第一个实例,因为在使用div
进行第一次隐式迭代后删除包含文本的attr
元素:
$('.toolTipHTML').attr('title', function(){
var ele = $(this).attr('data-ttipcontent');
return $('.' + ele + '_content').remove().html() // Removed, no longer available!
})
如果您移除remove()
并只查询innerHTML(html()
),那将解决您的问题。但是,那么你将在你的DOM中留下那些DIV元素!
如果你不介意让他们在你的DOM中冷静下来,你可以使用一些CSS并隐藏它们(无论如何,我会建议 - 因为他们会在脚本运行之前显示...)< / p>
如果想到他们在那里冷静,占用DOM空间,或者你可能会看到数百个,也许数千个辅助div节点(好吧,不可能!),你真的想要删除它们,然后在这里& #39;我是一个小提琴:
(function() {
var _cache = {};
$('.toolTipHTML').each(function(){
$(this).attr('title', function(){
var ele = $(this).attr('data-ttipcontent'),
title;
if (_cache[ele]) {
title = _cache[ele];
} else {
_cache[ele] = $('.' + ele + '_content').remove().html();
title = _cache[ele];
}
return title;
});
});
_cache = undefined;
}());
它包含在一个自执行函数中,以最大限度地减少暴露全局变量。该脚本缓存HTML,以便将来需要内容的元素将使用缓存的内容。您可以使用元素本身(将删除的元素抛出到片段中)来扩展缓存概念。两种方式(理论上)都会提高性能,因为您最大限度地减少了触摸DOM的需求。有趣的东西!