Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS help needed on a super accessible button w/ tooltip

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #43063
    DanielGoransson
    Participant

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

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

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

    #126760
    DanielGoransson
    Participant

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

    #126771
    Paulie_D
    Member

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

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.