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…
This reply has been reported for inappropriate content.
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.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed