jquery - jquery中的工具提示问题

Question

我想在 jquery 中将 html 表显示为工具提示。我有自己的 css，我想使用

.tooltip({ effect: 'slide'});

这是我的jQuery

$("#currency1").tooltip({ effect: 'slide'});

这是我的html

<a id="currency1"><div id="currencyresult1">AED 22222</div></a>

完整的细节在这个 jsfiddle http://jsfiddle.net/4YDGp/2/

（我知道小提琴中缺少一些图像，但它也不适用于图像）

Answer 1

小提琴：http: //jsfiddle.net/4YDGp/7/

当工具提示的源/自身（工具提示）没有悬停在上面时，工具提示会消失delay。这delay是设置在顶部的，您可以随意调整。

var delay = 800;

$("#currency1").mouseover(function(){
    //tooltip();
    $('.tooltip').show({ effect: 'slide'});
});

$('.tooltip').mouseover(function(){
    $(this).addClass('hovering');
});

$('.tooltip').mouseleave(function(){
    $(this).removeClass('hovering');
    setTimeout(function(){
        if (!$('.tooltip').hasClass('hovering')){
            $('.tooltip').hide();
        }
    }, delay)
});

$("#currency1").mouseleave(function(){

    setTimeout(function(){
        if (!$('.tooltip').hasClass('hovering')){
            $('.tooltip').hide();
        }
    }, delay)
});

Answer 2

使用jQueryUI，此方法也适用（此处选择器与 相关div#currency1）：

$("#currency1").tooltip({
    effect: 'slide',
    content: function() {
        return $('div.tooltip').html();
    },
    open: function(event, ui){
        $(ui.tooltip).appendTo(this);
    }
});

您只需要修复无效的 HTML（将锚移到 div 中）

<div id="currency1" title="aaaaa"><a id="currencyresult1">AED 22222</a></div>

jsfiddle