treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

CSS help needed on a super accessible button w/ tooltip

  • DanielGoransson
    Permalink to comment #

    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/

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

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

    http://codepen.io/DanielGoransson/pen/flewB

  • DanielGoransson
    Permalink to comment #

    The HTML basically look this:

      <button>
      <span class="icon"></span>
      <span class="tooltip">Navigation</span>
  </button>

    And the idea is to have the .tooltip hidden and then shown on :hover without expanding the width of the <button>...

  • Paulie_D
    Permalink to comment #

    Here's a start...it's by no means perfect...

    http://codepen.io/Paulie-D/pen/acGen

  • Eric
    Permalink to comment #

    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.

Add a Comment