The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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

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

    # 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.

    And here is the auto expand one that Paul OB came up with in a recent post of mine

    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