How do display a styled popup/tooltip on mousehover ofr a table's rows in HTML5/JQUERY?


I have a table in HTML 5 that has way too many columns to display cleanly.
I'd like to be able to show a popup/tooltip that would show the row details as my mouse hovers it.

I've seen references to tooltip and qtip.

I'd like to be able to create tooltip/popup that is "multi-row" - 'multi-column."
I'd like to be able have this popup be styled (color, font, layout).

What is the best way to do this?

Can you point me out to a working example?

jxbmaSoftware ConsultantAsked:
Who is Participating?
skullnobrainsConnect With a Mentor Commented:
you cqn use the tooltip builtin tool

$(function() {
$( document ).tooltip();

and specify the tooltip's content in the title attribute


or do it manually using something like this


this assumes your tooltip is set in a floating element and has the "tooltip" id. you can use various efects such as fadein/out or slideup/down instead of show/hide
A CSS hover rule can easily give you what you need but the structure of the page dictates how the rule declaration needs to be written.  if you post a link or your markup we should be able to put it together.

RobOwner (Aidellio)Commented:
I would also have a rethink and consider: that would allow you to have child tables / rows within your main table.  On the demo, click the Phone icon at the far left of any row to see the child table.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.