Single Element Tooltip

index.haml

%main{:role => "main"}
  %h1 Single Element Tooltip
  %p Do you like <span data-tooltip="like this one" tabindex="0">tooltips</span>? Do want to use them <span data-tooltip="well do you?" tabindex="0">without a hassle</span>? <span data-tooltip="also known as smart CSS" tabindex="0">Effortless Style</span> is here to help you!
  %p If you <span data-tooltip="why not, right?" data-side="right" tabindex="0">realy want to</span>, you can decide on <span data-tooltip="do you like my bottom?" data-side="bottom" tabindex="0">which side</span> the tooltip appears.

Single-Element-Tooltip.markdown

Single Element Tooltip

This is a single element tooltip that is somewhat accessible. Tooltips are activated on hover, or when they receive focus. VoiceOver does announce the content on focus, but not on hover.

To make this even more accessible, we could use two element and a role-attribute of tooltip on the element that represents the tooltip. We can link to that element with aria-describedby. You can read more about role="tooltip" in the WAI-ARIA specification.

@heydon made an example with role="tooltip" available on his website.

A Pen by Michiel Bijl on CodePen.

License.

style.scss

// Some vars
$link-color: #f52e62;
$text-color: #3f517e;
$tooltip-border: #c9e0ef;
$tooltip-background: #fff;

$background-color: #fff;

// Tooltip Magic
[data-tooltip][tabindex="0"] {
  display: inline-block;
  position: relative;
  color: $link-color;
  cursor: text;
  
  &::after {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    padding: 3px 5px;
    max-width: 200px;
    transform: translateX(-50%);
    border: 1px solid $tooltip-border;
    border-radius: 3px;
    color: $text-color;
    // You can also use a fixed width and ommit the white-sapce.
    white-space: nowrap;
    background-color: $tooltip-background;
    // Make sure tooltips don't block each others trigger.
    pointer-events: none;
    content: attr(data-tooltip);
  }
  
  // Create a neat little arrow
  &::before {
    display: none;
    position: absolute;
    bottom: 110%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, 50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border: solid $tooltip-border;
    border-width: 0 1px 1px 0;
    background-color: $tooltip-background;
    content: '';
  }
  
  // Activate tooltip
  &:focus,
  &:hover {
    text-decoration: underline;
    
    &::after,
    &::before {
      display: block;
    }
  }
  
  // Different directions
  &[data-side="right"] {
    &::after,
    &::before {
      bottom: 50%;
      left: 100%;
      margin-left: 10px;
    }
    
    &::after {
      transform: translate(0, 50%);
    }
    
    &::before {
      transform: translate(-50%, 50%) rotate(135deg);
    }
  }
  
  &[data-side="bottom"] {
    &::after,
    &::before {
      bottom: auto;
      top: 110%;
    }
    
    &::after {
      transform: translate(-50%, 0);
    }
    
    &::before {
      transform: translate(-50%, -50%) rotate(225deg);
    }
  }
  
  &[data-side="left"] {
    &::after,
    &::before {
      right: 100%;
      bottom: 50%;
      left: auto;
      margin-right: 10px;
    }
    
    &::after {
      transform: translate(0, 50%);
    }
    
    &::before {
      transform: translate(50%, 50%) rotate(315deg);
    }
  }
}

// Unimportant bits
main {
  margin: 0 10px;
  
  @media (min-width: 30em) {
    margin: 0;
    padding: 0 10px;
    width: 30em;
  }
}

h1 {
  color: #44388b;
}

p {
  padding: 0 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $text-color;
  font-family: Avenir Next, Helvetica Neue, sans-serif;
  background-color: $background-color;
}