
Show HN: hint.css – a tooltip library in CSS - chinchang
http://kushagragour.in/lab/hint/
======
cstuder
For reference: Doesn't work on Internet Explorer 7, always shows the hints on
Internet Explorer 8 and works fine on Internet Explorer 9 (Minus the
animations.)

------
taf2
very cool, use of css3 attr function. allowing the rule:

content: attr(data-hint);

see: <https://developer.mozilla.org/en-US/docs/CSS/attr>

~~~
city41
I didn't know that was possible. has got my mind reeling with what I can now
do with CSS. Thanks OP for making this.

~~~
nej
Here's full range of what's possible with the CSS content Property in case
you're interested: <http://www.w3schools.com/cssref/pr_gen_content.asp>

------
hnriot
What's wrong with title="my took tip" and let th browser do it? For browsers
that don't its a single line of jQuery.

~~~
baby
it's just stylizing. What CSS does in general.

~~~
ibrahima
It'd be interesting if you could just apply CSS to title attributes rather
than have to add stuff to the DOM to reimplement a basic browser feature.
Certainly these types of tooltip libraries look and behave better, but I
wonder if it's really the best solution.

~~~
baby
Legit CSS for tooltip and scrolling bars will arrive some day. I hope.

------
tambourine_man
Nice, but it's broken on lesser browsers

[http://s3.postimage.org/8d3zodcur/Screen_Shot_2013_02_04_at_...](http://s3.postimage.org/8d3zodcur/Screen_Shot_2013_02_04_at_1_03_40_PM.png)

------
chinchang
Glad you guyz liked it and thought it to be useful :)

~~~
wazari972
do you think you can adapt it to display an entire <span> ? That's very neat,
but just single string text is not enough for me!

~~~
JangoSteve
It's wouldn't be possible if you're only using CSS. See this stackoverflow
post [1], or more specifically the spec it references [2] on the CSS content
property (used by this library).

The acceptable values are:

    
    
        normal | none | [ string | uri | counter | attr(identifier) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
    

You might think, maybe you could insert html by putting the html on an
attribute and using the attr() value, but reading further:

 _This function returns as a string the value of attribute X for the subject
of the selector. The string is not parsed by the CSS processor._

[1] [http://stackoverflow.com/questions/4505093/css-content-
prope...](http://stackoverflow.com/questions/4505093/css-content-property-
inserting-html-instead-string)

[2] <http://www.w3.org/TR/CSS21/generate.html#propdef-content>

~~~
wazari972
too bad ... I guess it means we're stuck with JS to display multiline and/or
format tooltips ...

~~~
chinchang
for the time being, yes.

------
davefp
Neat idea, and seems to work well.

On the other hand, having to include two classes seems sloppy. Why not just
roll the core styles into the position classes, or include a default position
in the 'hint' class?

Double dashes in class names are also annoying.

~~~
chinchang
Thanks. I thought of putting the core into the position classes but that
seemed to duplicate some styles in the generated CSS. Though having a default
position surely seems a nice idea. Will work on it :)

------
alpb
Finally we can get rid of Tipsy.js
<http://onehackoranother.com/projects/jquery/tipsy/>

~~~
andypants
Is there something wrong with tipsy.js?

I just took a quick look at it, and it seems like a nice tooltip library.

~~~
byroot
Well, Tipsy, bootstrap tooltips and similar javascript based tooltips require
you to initialize them.

It's fine if you have a mostly static page, so you can initialize all fo them
on domready.

But if you are in a very dynamic page with pjax or a Javascript MVC app, you
always have to initialize them again on any page change.

It's costly and error prone. This pure CSS solution in the other hand do not
require any initialization. You put the HTML with the proper classes and it
will just works.

------
Andrex
I really like it, but part of me thinks the better way would be to just use
whatever's on the title attribute of an element, which would of course need
JavaScript. I guess this would be better for lighter sites.

Edit- I misunderstood how this works, I thought you actually had to add
<span>s (extra markup) but it seems not! This is really great!

My only complaint is that it messes with elements if you're doing the
:before/after thing for font icons.

~~~
chinchang
Thanks Andrex. The issue with using title attribute is that its hard to
suppress the default tooltip that shows up with just CSS. Any idea if it can
be done?

~~~
Andrex
Not without JS as far as I know, which is unfortunate. It really should be
some kind of CSS attribute.

------
hjay
Nice job.

I created something extremely similar a few months back for my day job (wow
the traffic I missed out on!).

One thing I've encountered in this and in my own implementation: the hint gets
blocked by iframe if it's nearby. Has anyone figured out a way to reliably
have it appear over the iframe instead of under? I've been struggling with it
for a while and have not figured it out.

~~~
chinchang
Thanks. I'll have to check this iframe thing though the z-index should take
care I guess.

------
rdsubhas
Awesome!! (But the double hyphen in 'hint--top' or 'hint--left' is a bit
cheesy...)

~~~
philipwalton
The double hyphen is actually part of a pretty common naming convention (BEM-
style) for distinguishing between separate components, component modifiers,
and component sub-objects.

Examples: <https://gist.github.com/1309546>
[http://nicolasgallagher.com/about-html-semantics-front-
end-a...](http://nicolasgallagher.com/about-html-semantics-front-end-
architecture/) [http://csswizardry.com/2013/01/mindbemding-getting-your-
head...](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-
bem-syntax/) <http://engineering.appfolio.com/2012/11/16/css-architecture>

~~~
jackmoore
Good job with the citations

------
jtokoph
The one downside to any library that uses before/after pseudo elements is that
they take over the pseudo elements and can no longer be used for other
purposes.

I would say that they should only be used for styling and not functionality.

------
gjunkie
Very clever. FWIW There are some issues when the node is near the edge of the
window. The browser will display the contents of a title attribute atop the
browser chrome, but your tooltip will be hidden.

------
ryankshaw
one caveat, any approach like this (one that just uses css) will hide the
tooltip if the thing it is tipping (or one of it's parents) is clipped by
overflow:auto/scroll/hidden. the only way to get around that is using
javascript (the tooltip needs to be inserted into the dom outside of the
element with constrained overflow, eg: as a child of body). I've found that in
any decent size project I've done, eventually I run into that scenario, so I
usually just start with a JS based approach from the beginning (bootstrap,
jqueryUI, etc)

~~~
dhaffner
Just thinking aloud here. Could that problem be avoided by putting the tooltip
element outside of the thing it is tipping, and then using a CSS selector like
".tipped-element:hover + .tooltip-element"?

I'm sure there are some other caveats that would reveal themselves later even
if this one is avoidable...

------
i_like_robots
Cool, I had a similar go a while back
<http://jsfiddle.net/i_like_robots/qrXyE/>

------
binarydreams
More CSS Tooltips - <http://cssdeck.com/search/?q=tooltip> (just sharing)

~~~
experiment0
Only one submission on the page you linked to was actually a comparable tool
tip.

------
figurify
brilliant... i always hated adding weirdo js for such standard tasks,
polluting the content with meta-code/meta-content ugliness!

------
CGamesPlay
I wish it would position itself so that it was always on the screen, e.g.
scroll so the top-toolip is off the screen.

------
sankage
Do you have a browser compatibility list?

~~~
chinchang
I'll prepare a compatibility sheet and put up soon on the project page.
Meanwhile if anyone wants to take this up, please go ahead.

------
sauravt
Cool, I am a fan of this ever since I this on codepen. Really awesome stuff.

------
higaron
can we keep the tip active on hover of the tip? lets say the text was long and
I wanted to traverse the text with my mouse pointer, can I have that?

just the tip!

------
vaidik
Awesome work Kush! Looking forward to using it! :)

------
quarterto
The animations work for me in Chrome dev (26).

------
baby
Now is foundation/bootstrap going to use it?

------
siddharthdeswal
Great work Kushagra. Very useful stuff.

------
hawkw
Well implemented. Thanks for sharing!

------
tonybaroneee
Truly a great tool, thanks for this!

------
kaolinite
Really nice - will use this.

------
scottmagdalein
I'm a fan.

