- This topic is empty.
-
AuthorPosts
-
March 1, 2013 at 5:06 am #43063DanielGoranssonParticipant
Hi guys!
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.
Description
_____________________________________________
# 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:- Is a native <button> and therefor inherits
- Mouse & keyboard (enter & space) clickability
- Keyboard foucusability
- Annunciation as a button for screen readers
- CSS injects icon, for non-visual web browsers
- Hides icon for screen readers
- Uses hidden text, for screen readers
- Hides text by z-index -1 insead of off-screen to make it tapable with iOS using VoiceOver screen reader
- Shows text as tooltip on hover and focus
- Tooltip won’t disappear on mouse over or slightly outside. This makes the text readable with full zoom.
_____________________________________________
## HiDPI/RetinaNo use of images.
Only scalable vector based graphics as icon-fonts and pure CSS.
_____________________________________________March 3, 2013 at 12:29 pm #126760DanielGoranssonParticipantThe 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>…
March 3, 2013 at 2:16 pm #126771Paulie_DMemberHere’s a start…it’s by no means perfect…
- Is a native <button> and therefor inherits
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.