Accessible info tooltip

_accessible-hide.sass

@charset 'UTF-8'

// Hide and show content accessibly. The content is visually hidden, but
// screen readers and other assistive technology should still read it.
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin accessible-hide
  position: absolute
  // Without any top/right/bottom/left declaration, the element would be
  // positioned at its position in the normal flow. This may cause scrollbars
  // so we move it to top/left position of the containing block.
  left: 0
  top: 0
  height: 1px
  width: 1px
  overflow: hidden
  // Legacy syntax for IE6 and IE7
  clip: rect(1px 1px 1px 1px)
  clip: rect(1px, 1px, 1px, 1px)

%accessible-hide
  +accessible-hide

@mixin accessible-show
  position: static
  left: auto
  top: auto
  width: auto
  height: auto
  overflow: visible
  clip: auto

%accessible-show
  +accessible-show

_focus-box-shadow.sass

@charset 'UTF-8'

@mixin focus-box-shadow
  box-shadow: 0 0 4px rgba($color, 0.9)

@mixin focus-outline
  &:focus
    +focus-box-shadow
    outline: 0

_info-tooltip.sass

@charset 'UTF-8'

// Modifiers for tooltip positioning

// This abstract class is applied a parent element of .info-tooltip

%info-tooltip

  $tooltip-width: 200px

  .info-tooltip
    position: relative
    display: inline-block
    color: $color-muted
    cursor: pointer

    p, ul, ol
      margin: 0

    a, a:hover
      color: lighten($color, 30%)

  .info-tooltip-content
    @extend %accessible-hide
    // See z-indices.txt
    z-index: 201
    // Set opacity for fade-in transition
    opacity: 0
    +transition(opacity 250ms ease)
    border-radius: $border-radius
    padding: $vertical-gap-quarter $vertical-gap-half
    background-color: $color-text
    font-family: $font
    font-size: $font-size-small
    line-height: $line-height-small
    color: white

  .info-tooltip

    // Show content on hover and focus
    &:hover, &:focus
      .info-tooltip-content
        @extend %accessible-show
        // Fade in
        opacity: 1
        position: absolute
        // Per default, orient left/top so the tooltip is shown
        // on the right/bottom
        left: 0
        top: $line-height + 2px
        width: $tooltip-width

    // Custom focus style
    &:focus
      outline: 0
      .info-tooltip-content
        +focus-box-shadow

  // Additional classes for positioning
  .info-tooltip-right
    @extend %info-tooltip-right

  .info-tooltip-top
    @extend %info-tooltip-top

// Positioning

%info-tooltip-right
  &:hover, &:focus
    .info-tooltip-content
      left: auto
      right: 0

%info-tooltip-top
  &:hover, &:focus
    .info-tooltip-content
      top: auto
      bottom: $line-height

index.html

<div class="info-tooltip info-tooltip-right" tabindex="0">
  This content is readable all the time
  <p class="info-tooltip-content">
    This content is shown on focus, accessible to assistive technology all the time
  </p>
</div>