Question

In a asp.net/c# web application I am writing a jQuery script.

I have an event function like this:

function showInfo(event,label){
    switch (label)
    {
        case 'America':
            //Show America's info
            break;
        case 'Europe':
            //Show Europe's info
            break;
        case 'Africa':
            //Show Europe's info
            break;
    }
}

I want to show the info in a box. The info box should support basic HTML elements like pictures and tables; What is the best way to do this?

I tried to use qtip2 but I didn’t know how to show a tooltip through that function (There is no elements to link the tooltip to).
I want to have some function like ShowTooltip() that I can call whenever I like.

Answer 1

Give all the elements you want to do this to the same class, then create an on hover function like so;

$('body').on("hover", ".tooltipclass", hoveron, hoveroff);

Then create your hover on/off functions. Depending what kind of elements you are trying to do it to there are lots of ways you could achieve this, you could give the element another class name such as america or europe, then use $(this).hasClass to check which tooltip to display.

As far as the actual mechanics of displaying the tooltip are concerned, you could have the tooltips hidden on the page already, or bring them in with an AJAX call, then position them based on mouse position, see here http://docs.jquery.com/Tutorials:Mouse_Position

Of course lots of people have already done this so you could just look for a tooltip plugin