Question

I’m writing a JavaScript application, and I found a nice library qtip2. My goal is when the user hover the mouse over each cell in the table, a different information is displayed. That library I mentioned above does the job of displaying the info in a small pop up window. However, I’m not sure how to set up this function in other to display each cell’s particular content when hover over it. Does someone have an idea how can I accomplish that?

function showInfo()
    {
            $('#demo-mouse').qtip({
                content : 'I position myself at the current mouse position',
                position : {
                    my : 'top left',
                    target : 'mouse',
                    viewport : $(window),       //keep it on-screen at all time if possible
                    adjust : {
                        x : 10, y : 10
                    }
                },
                hide : {
                    fixed : true                // Helps to prevent the tooltip from hiding occassionaly when tracking!
                },
                style : 'ui-tooltip-shadow'
        });
    }

Answer 1

You can use the extented content property and use classes in the elements you want to show the tips:

$('.selector').qtip({
    content: {
        text: function(api) {
            // Retrieve content from custom attribute of the $('.selector') elements.
            return $(this).attr('data-tip');
        }
    }
});