6 ms·
Show HN: hint.css – a tooltip library in CSS
- figurify 14y agobrilliant... i always hated adding weirdo js for such standard tasks, polluting the content with meta-code/meta-content ugliness!
- sauravt 14y agoCool, I am a fan of this ever since I this on codepen. Really awesome stuff.
- deleted 14y ago[deleted]
- taf2 14y agovery cool, use of css3 attr function. allowing the rule: content: attr(data-hint); see: https://developer.mozilla.org/en-US/docs/CSS/attr https://developer.mozilla.org/en-US/docs/CSS/attr
- city41 14y agoI 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 14y agoHere'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 http://www.w3schools.com/cssref/pr_gen_content.asp
- i_like_robots 14y agoCool, I had a similar go a while back http://jsfiddle.net/i_like_robots/qrXyE/ http://jsfiddle.net/i_like_robots/qrXyE/
- hawkw 14y agoWell implemented. Thanks for sharing!
- kaolinite 14y agoReally nice - will use this.
- scottmagdalein 14y agoI'm a fan.
- siddharthdeswal 14y agoGreat work Kushagra. Very useful stuff.
- chinchang 14y agoGlad you guyz liked it and thought it to be useful :)
- wazari972 14y agodo 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!
- chinchang 14y agoYou mean you want to show HTML inside the tooltip?
- wazari972 14y agoyes indeed, especially to allow multiline. (but maybe that's not your original intend ... ?)
- JangoSteve 14y agoIt'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-property-inserting-html-instead-string http://stackoverflow.com/questions/4505093/css-content-prope... [2] http://www.w3.org/TR/CSS21/generate.html#propdef-content http://www.w3.org/TR/CSS21/generate.html#propdef-content
- wazari972 14y agotoo bad ... I guess it means we're stuck with JS to display multiline and/or format tooltips ...
- binarydreams 14y agoMore CSS Tooltips - http://cssdeck.com/search/?q=tooltip http://cssdeck.com/search/?q=tooltip (just sharing)
- experiment0 14y agoOnly one submission on the page you linked to was actually a comparable tool tip.
- quarterto 14y agoThe animations work for me in Chrome dev (26).
- gjunkie 14y agoVery 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.
- tonybaroneee 14y agoTruly a great tool, thanks for this!
- sankage 14y agoDo you have a browser compatibility list?
- chinchang 14y agoI'll prepare a compatibility sheet and put up soon on the project page. Meanwhile if anyone wants to take this up, please go ahead.
- tambourine_man 14y agoNice, but it's broken on lesser browsers http://s3.postimage.org/8d3zodcur/Screen_Shot_2013_02_04_at_1_03_40_PM.png http://s3.postimage.org/8d3zodcur/Screen_Shot_2013_02_04_at_...
- cstuder 14y agoFor 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.)
- rdsubhas 14y agoAwesome!! (But the double hyphen in 'hint--top' or 'hint--left' is a bit cheesy...)
- kaichanvong 14y agoAlso liked it - and agree, double hyphen is mega ewww.
- philipwalton 14y agoThe 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 https://gist.github.com/1309546 http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a... http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://csswizardry.com/2013/01/mindbemding-getting-your-head... http://engineering.appfolio.com/2012/11/16/css-architecture http://engineering.appfolio.com/2012/11/16/css-architecture
- jackmoore 14y agoGood job with the citations
- davefp 14y agoNeat 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 14y agoThanks. 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 :)
- jtokoph 14y agoThe 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.
- ryankshaw 14y agoone 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)
- philipwalton 14y agoI was going to say the exact same thing, but you beat me too it! I started with this approach when I built our tooltip library for my company, but eventually there were just too many gotchas. We switched to using JavaScript and inserting the generated element as a child of `body`.
- dhaffner 14y agoJust 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...
- Andrex 14y agoI 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.
- hnriot 14y agoWhat's wrong with title="my took tip" and let th browser do it? For browsers that don't its a single line of jQuery.
- danso 14y agoBecause the browser may render the tool tip slower than you'd like. Plus, it may be too generic a look for bespoke sites.
- pornel 14y agoUnfortunately `title` implementations are broken for pretty much everybody except mouse users on desktop: http://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/ http://www.paciellogroup.com/blog/2013/01/using-the-html-tit...
- baby 14y agoit's just stylizing. What CSS does in general.
- ibrahima 14y agoIt'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 14y agoLegit CSS for tooltip and scrolling bars will arrive some day. I hope.
- philfreo 14y agoThe time spent hovering for the built in title attribute to be displayed is so long that most users will never see/notice the tooltip.
- baby 14y agoNow is foundation/bootstrap going to use it?
- alpb 14y agoFinally we can get rid of Tipsy.js http://onehackoranother.com/projects/jquery/tipsy/ http://onehackoranother.com/projects/jquery/tipsy/
- andypants 14y agoIs there something wrong with tipsy.js? I just took a quick look at it, and it seems like a nice tooltip library.
- byroot 14y agoWell, 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.
- CGamesPlay 14y agoI wish it would position itself so that it was always on the screen, e.g. scroll so the top-toolip is off the screen.
- vaidik 14y agoAwesome work Kush! Looking forward to using it! :)
- higaron 14y agocan 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!
- hjay 14y agoNice 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 14y agoThanks. I'll have to check this iframe thing though the z-index should take care I guess.
- deleted 14y ago[deleted]