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);
    }
});

您只需要to fix that invalid HTML（将锚点移动到div中）

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

jsfiddle

jquery中的工具提示问题

2 个答案: