CSS help needed on a super accessible button w/ tooltip

  • # March 1, 2013 at 5:06 am

    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.

    # 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/Retina

    No use of images.
    Only scalable vector based graphics as icon-fonts and pure CSS.


    # March 3, 2013 at 12:29 pm

    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>…

    # March 3, 2013 at 2:16 pm

    Here’s a start…it’s by no means perfect…


    # March 3, 2013 at 2:25 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed