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…
From what I understand you want a tooltip to remove from flow and auto expand per any amount of words?
Here is mine. As is its fixed width. http://www.websitecodetutorials.com/code/css/css3-animated-tooltip-cross-browser.php
And here is the auto expand one that Paul OB came up with in a recent post of mine http://www.sitepoint.com/forums/showthread.php?901942-CSS-tooltip-how-to-auto-center-over-element&highlight=centered+tooltip+ericwatson
I feel your frustration. It took me quite some time to work out all the bugs in all the browsers.
You must be logged in to reply to this topic.