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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.