I’m close to find the perfect way to code an icon button with tooltip.
I have a working version of how I want it to look and behave, but this version is not so dynamic (if the tooltip is in multiple words or length it must be re-coded)
You can see the “working” version at [http://axslab.com/beta/buttons/](http://axslab.com/beta/buttons/)
…and heres the dynamic “non-working” version on CodePen http://codepen.io/DanielGoransson/pen/flewB
I’m an accessibility specialist, but not quite as ninja on CSS as you guys.. so I’m reaching out to the community to solve this problem.
# A super accessible button with tooltip..
## The Problem
Can’t get the text/tooltip removed from flow and remain dynamic (to be able to have any text and number of words)
(Also: Seems like theres a bug in Chrome that leaves an artifact of the tooltip until window scroll… Like WTF?)
## Accessibility checklist:
No use of images.
Only scalable vector based graphics as icon-fonts and pure CSS.
The HTML basically look this:
And the idea is to have the .tooltip hidden and then shown on :hover without expanding the width of the <button>…
Here’s a start…it’s by no means perfect…
You must be logged in to reply to this topic.