CODEWITHSUNDEEP
jqueryhtmlhtml-tabletooltip
TonyC
TonyC

Reputation: 397

JQuery tooltip for html table

I have an html table with columns: id|name|short|info ...

Now I want, whenever I hover over "name" that the according info text from "info" is being displayed as a tooltip using jquery. I'm testing with the flowplayer tooltip plugin but cannot seem to find the right way of selecting the needed data.

Since I'm not sure if I could then hide the complete info column and only show the text as a tooltip for "name" I wanted to ask if you can tell me a better way to accomplish this task.

Here's a link to the table structure:

jsfiddle Link

Upvotes: 0

Views: 2895

Answers (1)

Placinta Salaru Alin
Placinta Salaru Alin

Reputation: 88

I recommend you to use jQuery UI tooltip, it's very simple to use.

I figured that you should iterate through all the < tr > that you have and insert a hiperlink with the title of Info, i think is the most efficient way. 

$('tr').each(function(index) {
    var x = $($(this).find('td')[3]).text();
    $($(this).find('td')[1]).wrap('<a href="#" title="' + x + '">' + '</a>');
});

Here is a fiddle link to my http://jsfiddle.net/Pr5sg/16/.You must expand the result so you can see better the hover information. What you have to do next is edit the css so that will fit your needs. This is my first stackoverflow answer so i apologize if my english is bad.

Hope it really helps!

Upvotes: 1

Related Questions