• # 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 [](

    …and heres the dynamic “non-working” version on CodePen

    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…

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

You must be logged in to reply to this topic.