Why does the qtip tooltip appear on other buttons

Question

So, I want to show tooltips for specific buttons and not for other buttons. Here's my code with an example where I want to show tooltip with the word "TAB" on hover for the TAB button. However, if I hover over other buttons like FOO and BAR, it shows TAB too. I'm not sure what would be causing this? Is it because they share the same class even though I put a particular ID for TAB?

js function:

    $('#TabBtn').mouseover(function () {
        BrowserSide.Objects.ToolTip("#TabBtn", "Tab");
    }).mouseout(function () {
        $("#TabBtn").qtip('destroy', true);
    });

Where Tooltip is:

ToolTip:function(elementId,toolTipContent){

    $(elementId).parent().mouseover(function (event) {

        $(this).qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                delay: 500,
                ready: true,
            },
            position: {

                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: -35,
                    mouse: true  // Can be omitted (e.g. default behaviour)
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
  });
}

Html code:

<button id="TabBtn" class='newUI-toolbar-button-with-icon' style="margin:10px 8px 5px 8px; width:40px !important; height:30px !important"><span id="toolbar-TAB" class="newUI-toolbar-button-label" style="position: relative; top: -2px">Tab</span></button>
<button class='newUI-toolbar-button-with-icon' style="margin:10px 8px 5px 8px; width:40px !important; height:30px !important"><span id="toolbar-FOO" class="newUI-toolbar-button-label" style="position: relative; top: -2px; left: -4px">Foo</span></button>
<button class='newUI-toolbar-button-with-icon' style="margin:10px 8px 5px 8px; width:40px !important; height:30px !important"><span id="toolbar-BAR" class="newUI-toolbar-button-label" style="font-size: 8px !important;position: relative; top: -3px; left: -4px">Bar</span></button>

Answer 1

Default qTip

Let's go over the default qtip functionality.

$('#btn').qtip({
    content: "Mouseover in a qtip"
});

This creates a qtip that appears everytime the user mouses over the button. It does this without having to specify a mouseover handler. (demo)

qTip's Target

The qtip appears on whatever selection is to the left of the .qtip(). So

// when parent of button is moused over
$(elementId).parent().mouseover(function (event) {
    // add a qtip to $(this)
    $(this).qtip({

In that function, this is the window object. So you are adding a qtip to the global window object but only creating and destroying it when you mouseover the parent of a button. Needless to say, there isn't a good reason to do this.

Standard qTip usage

Unless you have some edge case for manually showing and hiding of qtips, don't. Instead utilize qTip's built in event handling and customize it with options or callbacks.

I'd recommend:

• 1 qtip per button
• create the qtip only once
• create the qtip when the page loads (or the widget initializes, etc)
• use the show and hide options to control visibility

So, from your code, I imagine you want something like:

var ToolTip = function (element, toolTipContent) { // Adds one qtip to one element. 
    $(element).qtip({
        content: toolTipContent,
        show: {
            event: "mouseenter",
            delay: 500,
            //ready: true, //don't do this
        },
        position: {
            target: 'mouse', //qtip will follow the mouse
            my: 'top center',
            at: 'top center',
            adjust: {
               x: 0,
               y: 15,
            }
        },
        style: {
            classes: "qtip-tooltip-for-ellipse"
        }
    });
};

ToolTip("#TabBtn", "Tab"); // This should be run only once at page load

Fiddle

Answer 2

You are adding a new .mouseover handler to the button's parent each time you mouseover the button. Is there a reason for this?

It should be enough if you do just:

$('#TabBtn').mouseover(function (event) {
    BrowserSide.Objects.ToolTip("#TabBtn", "Tab", event);
})

function(elementId,toolTipContent, event){
        $(this).qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                delay: 500,
                ready: true,
            },
            position: {

                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: -35,
                    mouse: true  // Can be omitted (e.g. default behaviour)
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
}