Edit in JSFiddle

<p>This is demo for jQuery tooltip. Hover the show link. <a id="show" href="#" title="This is slideDown effect.">show</a>
</p>
<p>This is demo for jQuery tooltip. Hover the hide link. <a id="hide" href="#" title="On mouse out the tooltip will disappear with explode effect.">hide</a>
</p>
<p>This is demo for jQuery tooltip. Hover the open link. <a id="open" href="#" title="Tooltip will give effect of opening.">open</a>
</p>

$(function () {
    $("#show").tooltip({
        show: {
            effect: "slideDown",
            delay: 500
        }
    });
    $("#hide").tooltip({
        hide: {
            effect: "explode",
            delay: 500
        }
    });
    $("#open").tooltip({
        show: null,
        position: {
            my: "left top",
            at: "left bottom"
        },
        open: function (event, ui) {
            ui.tooltip.animate({
                top: ui.tooltip.position().top + 20
            }, "slow");
        }
    });
});