仅jQuery工具提示显示DIV内容

时间:2014-06-11 02:51:07

标签: jquery tooltip

我正在尝试使用jquery的toolTip来显示鼠标悬停内容。但不是title =“...”内容,我希望它显示DIV内容。它应该是模块化的......

这就是我想出的。它不太有用......它只适用于第一个实例。

http://jsfiddle.net/5kkgS/1/

$(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

谢谢,

2 个答案:

答案 0 :(得分:1)

它仅适用于第一个,因为您在第一个循环后删除了内容元素。改为使用hide。

return $('.' + ele + '_content').hide().html();

DEMO http://jsfiddle.net/5kkgS/4/

答案 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;我是一个小提琴:

http://jsfiddle.net/5kkgS/2/

(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的需求。有趣的东西!