Comments on: Bubble Point Tooltips with CSS3 & jQuery

By: Chris Coyier

Chris Coyier — Fri, 06 Jan 2012 00:39:21 +0000

That would be a nice feature. Not too hard actually, if you use jQuery UI for .postion() instead of native jQuery. .postion() has collision detection and will move what what you are positioning to be on screen.

By: Paul

Paul — Fri, 06 Jan 2012 00:37:00 +0000

That one doesn’t reposition itself if theres no space in the screen… I’m trying to make one but I think this one is the most efficient and simple:
https://code.google.com/p/littletip/

Thanks for the post!

By: Elixon

Elixon — Fri, 25 Nov 2011 15:18:06 +0000

Or supply callback for the tooltip contents. Let user decide what goes in the tooltip - if rich text or plain text... I've done it with my Elixon Tooltip and it is as universal as it can be... I can use it for so many things now...

By: Daniel Piechnick

Daniel Piechnick — Fri, 25 Nov 2011 07:16:25 +0000

It’s a lot of CSS for a little tooltip. I’ve made tooltips in the past, but I always end up making them redundant, by rewriting my content, and just explaining things better. which is sad, because I really like tooltips. :P

Daniel Piechnick

By: Tuomas Salo

Tuomas Salo — Thu, 24 Nov 2011 14:07:21 +0000

Looks good, but is a bit problematic. The contents of the title attribute is normally plaintext, but this solution turns it into HTML – but not for everyone, since the plaintext title is used as a failover. So, if you want to have an ampersand in the title text, or maybe even a , what would you write to the title attribute?

Thus, this tooltip implementation is also a possible attack vector for XSS exploits. Imagine an application that lets users input some text for tooltips, say, image captions. Then the admin wants to fancify the interface with these tooltips. Whoops! Now the users can enter arbitrary HTML code.

My proposition: let the title attribute be plain text. Add another attribute, say data-fancy-html-title when HTML is needed.

By: Ricardo

Ricardo — Wed, 23 Nov 2011 13:17:39 +0000

Using a span inside of the a element, and positioning it as absolute and show it when hovered would be semantic right?

By: EstherH

EstherH — Wed, 23 Nov 2011 08:47:29 +0000

you should update your browser… I think the latest FF is 8.0

By: Scott

Scott — Tue, 22 Nov 2011 20:41:14 +0000

I was having trouble with the tooltips positioning relative to the wrap container. Pulled my hair out trying to figure it out, played with 'relative' and 'absolute' all over the place. I finally resorted to changing the var linkPosition = $el.position(); to var linkPosition = $el.offset(); even though I don't think this is recommended. Also, can anyone tell me why this doesn't work in IE8? I added all the IE specific 'opacity' rules, but still doesn't work at all. It doesn't look like anything that unusual going on with the JS or CSS, so it can't be that difficult to at least make a crippled version work in IE8.

By: Eva

Eva — Mon, 21 Nov 2011 23:51:52 +0000

Awesome and very useful!

One question: Is it possible to prevent the tooltip from hovering out of the browser window.

THX!

By: Chris Coyier

Chris Coyier — Mon, 21 Nov 2011 15:45:30 +0000

It doesn’t work at all in IE 8 and down, so use conditional comments to prevent the scripts from being loaded there (see early comment).

Also read the section about Opera in the article. The problem is pointer-events. You can alter this yourself to move the “hidden” tooltip from sitting on top of the link to solve that problem. For instance, have it be above the link instead and float down and away instead of up and away.