For those wondering, the main trick is here:
<a href="https://github.com/chinchang/hint.css/blob/master/hint.css#L65" rel="nofollow">https://github.com/chinchang/hint.css/blob/master/hint.css#L...</a><p>This creates a pseudo ":after" element with content set to the value of the data-hint attribute. Smart!<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/attr</a>
I haven't verified this, but I really doubt that this, or any other CSS-only solution, will work with elements constrained in an `overflow: hidden` block with a fixed height too short to display the tooltip. Which is a fairly common scenario when building app UIs. Most of the work done by Javascript tooltip libraries is figuring out the correct position relative to the <body> tag and appending the tooltip element outside of normal flow constraints.<p>Also, a good JS solution will dynamically reposition the tooltip if the requested orientation results in the tooltip being clipped by the viewport (eg. switch from right to left, top to bottom).
How accessible is this approach to screen reader users and people who rely on keyboard interaction alone?<p>Edit: A quick test reveals these tooltips are not accessible at all.
On one of the very first tooltips at the very top of the landing page (the download button), my Chrome v48.0.2564.97 browser renders a very thin gap between the triangle of the tooltip and the content rectangle. Not a great first impression...Is anyone else seeing this? I suspect it has something to do with pixel percentages.
What is going on when the tooltip first shows as blurry, then becomes clear? The most obvious example is hovering over the download button. Does CSS scale transform always behave this way?
Here's an alternative I wrote a long time ago:
<a href="https://github.com/bevacqua/hint" rel="nofollow">https://github.com/bevacqua/hint</a><p>- Stylus or plain CSS<p>- Comes with a bit of JavaScript<p><pre><code> - Auto-docks to browser window edges
- Multi-line if hint is too long
- Transitions</code></pre>
Good work!<p>> "Works in all modern browsers."<p>It'd be really helpful if you listed which browsers it's been tested to work in.
An interesting hack in minimalism. They accomplish being able to display user defined text in tooltips without JS by using content(data-attrib) in the CSS rule. I was not away that the content() rule allowed you to query other attributes on any matched tags and use them like variables
If anyone would like to try a live preview on their site, I wrapped hint.css in a quick Eager app: <a href="http://bit.ly/202YkC5" rel="nofollow">http://bit.ly/202YkC5</a>
Is there any demo of adding hint to <a href....>..</a>?
In desktop browser, I can see the hover events can trigger the hints.<p>How to make it work on touch browser? Touch should trigger the <a href>, but I also like to see hints shows up somehow.
Tooltips that flicker as you move mouse on the page feel really cheap. If you look at native tooltips, there is delay that waits for your mouse to "settle" to show the tooltip so that it doesn't flicker.
There's also a fork that allows HTML content:<p><a href="https://github.com/istarkov/html-hint" rel="nofollow">https://github.com/istarkov/html-hint</a>