tooltip issue in jquery

Question

I want to display html table as tooltip in jquery.I have my own css and I want to use

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

Here is my jquery

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

Here is my html

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

Complete detail is in this jsfiddle http://jsfiddle.net/4YDGp/2/

(I know some images are missing in the fiddle but it doesn't work with images either)

Answer 1

With jQueryUI this method also works (here the selector relates to div#currency1):

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

You only need to fix that invalid HTML (move the anchor into the div)

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

jsfiddle

Answer 2

fiddle: http://jsfiddle.net/4YDGp/7/

for the tooltip to disappear when its source/itself(tooltip) is not being hovered over there is a delay. this delay is set on the top, this is something which you can adjust as you please.

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