Question

I have this function where I need to show tooltip when the mouse is hover:

  content.live({
            mouseover: function () {
                if (settings.showButtons == false) {
                    content.hover(function () {
                        $('#' + settings.toolTipId).remove();
                        content.attr({ title: '' });
                        buildTipify();
                        positionTipify();
                    }, function () {
                        removeTipify();
                    });
                }
            },

But when the page is loaded for the first time it dosen’t popup and if I click anywhere on the page and If I mouse over my link then the poup is showing up.

I think the hover function inside hover may be is the one which makes scribble 🙁

Can anyone point out what am I doing wrong?

Here is my fiddle demo

Answer 1

The problem is that you only bind the hover event (technically mouseenter + mouseleave) when in the mouseover event for content. So the first time, there is no hover event binded, second time, there is so your tooltip shows.

Honnestly, I don’t really understand the whole thing with .live() you’re doing:
– why would you use event delegation on an element (content) that exists and remains ?
– why do you only bind your events (click or hover) under mouseover and mouseleave. It just makes no sense…

Here is how I would simply do it. Completely remove the .live() call and bind directly hover or click event according to settings.showButtons:

if (settings.showButtons == false) {
    content.hover(function() {
        $('#' + settings.toolTipId).remove();
        content.attr({
            title: ''
        });
        buildTipify();
        positionTipify();
    }, function() {
        removeTipify();
    });
} else {
    content.click(function(el) {
        // remove already existing tooltip
        $('#' + settings.toolTipId).remove();
        content.attr({
            title: ''
        });
        buildTipify();
        positionTipify();
        // Click to close tooltip
        $('#' + settings.closeTipBtn).click(function() {
            removeTipify();
            return false;
        });
        return false;
    });
}​

DEMO

Note: I’ve changed a bit the CSS for the close button because your button was invisible so I couldn’t see it.