// Just a simple CSS tooltip. I only implemented a bottom
// but it can be easily adapted to have other positions.
// eg: .tooltip.top or .tooltip.left

// Originally I had used the title attribute on the anchor,
// however the browser-based tooltip functionality will still
// trigger if the user hovers long enough. It's easier to use
// a custom attribute.

a.tooltip.demo(href="#", data-tooltip="This is some basic tooltip content that lives in a data attribute.") Hover over me
View Compiled
$tt-width = 250px
$tt-triangle-height = 10px
$tt-v-offset-start = 12px
$tt-v-offset-end = 5px
$tt-bg-color = rgba(0,0,0,0.5) 
$tt-anim-duration = 400ms
$tt-anim-delay = 200ms

.tooltip
  position: relative
  box-sizing: border-box

  &:after, &:before
    visibility: hidden
    opacity: 0
    position: absolute
    left: 50%
    box-sizing: border-box

  &:after
    content: attr(data-tooltip)
    background: $tt-bg-color
    top: 100%
    margin-top: $tt-triangle-height + $tt-v-offset-start
    padding: 10px
    color: white
    line-height: 1.5
    width: $tt-width
    margin-left: ($tt-width / -2)
    border-radius: 4px

  &:before
    content: ""
    top: 100%
    margin-top: $tt-v-offset-start
    margin-left: ($tt-triangle-height / -2) 
    border-left: $tt-triangle-height solid transparent
    border-right: $tt-triangle-height solid transparent
    border-bottom: $tt-triangle-height solid $tt-bg-color

  &:hover
    &:after, &:before
      transition: all $tt-anim-duration ease $tt-anim-delay
      visibility: visible
      opacity: 1
    &:after
      margin-top: $tt-v-offset-end + $tt-triangle-height
    &:before
      margin-top: $tt-v-offset-end


// Just for Codepen... styling and etc
body, html
  width: 100%
  height: 100%
  background: #d1adcf
  background: -moz-linear-gradient(-45deg,  #d1adcf 0%, #6393c1 100%)
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d1adcf), color-stop(100%,#6393c1))
  background: -webkit-linear-gradient(-45deg,  #d1adcf 0%,#6393c1 100%)
  background: -o-linear-gradient(-45deg,  #d1adcf 0%,#6393c1 100%)
  background: -ms-linear-gradient(-45deg,  #d1adcf 0%,#6393c1 100%)
  background: linear-gradient(135deg,  #d1adcf 0%,#6393c1 100%)

.demo
  width: 160px
  text-align: center
  padding: 10px 0
  background: rgba(255,255,255,0.6)
  border-radius: 4px
  position: absolute
  left: 50%
  margin-left: -80px
  top: 45%
  text-transform: uppercase
  font-size: 12px
  letter-spacing: 2px
  text-decoration: none
  font-family: Verdana
  color: #000
  box-shadow: 0px 2px 0px 1px rgba(0,0,0,0.1)

  &:before, &:after
    font-size: 14px
    letter-spacing: 0
    text-transform: none
    font-family: Arial, helvetica, sans-serif
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js