CSS3 tooltips

tip.css

/**
 * CSS3 tooltips.
 * @link: http://jsfiddle.net/2am9gx72/5/
 * @example:
 * <span data-tip="Information tooltip" tabindex="-1">info</span>
 */
.tip, .tip-static, [data-tip]:before {
  width: 300px;
  padding: 10px;
  content: attr(data-tip);
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  white-space: pre-wrap;
  text-align: left;
  /* IE do not understand rem for line-height property for pseudo-elements */
  /* @link http://www.paulund.co.uk/rem-line-height-doesnt-work-pseudo-elements-ie */
  line-height: 1.33em;
  /* em, and I'm notified */
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  color: #FFFFFF;
  z-index: 1; }

.tip-arrow, .tip-static:after, [data-tip]:after, [data-tip][data-tip-right]:after, [data-tip][data-tip-left]:after, [data-tip][data-tip-top]:after, [data-tip][data-tip-top-right]:after, [data-tip][data-tip-bottom]:after {
  position: absolute;
  bottom: 10px;
  left: 3px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid; }

.tip-arrow-l, [data-tip][data-tip-right]:after {
  bottom: auto;
  top: 2px;
  left: auto;
  right: -5px;
  border-width: 5px 5px 5px 0;
  border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; }

.tip-arrow-r, [data-tip][data-tip-left]:after {
  bottom: auto;
  top: 2px;
  left: -5px;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.8); }

.tip-arrow-t, [data-tip][data-tip-bottom]:after {
  bottom: auto;
  top: auto;
  bottom: -5px;
  left: 0;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; }

.tip-arrow-b, [data-tip]:after, [data-tip][data-tip-top]:after, [data-tip][data-tip-top-right]:after {
  bottom: auto;
  top: -5px;
  left: 0;
  border-width: 5px 5px 0 5px;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; }

.tip-t, [data-tip]:before, [data-tip][data-tip-top]:before, [data-tip][data-tip-top-right]:before {
  bottom: 100%;
  margin-bottom: 5px;
  left: -10px; }

.tip-b, [data-tip][data-tip-bottom]:before {
  bottom: auto;
  top: 100%;
  margin-top: 5px;
  left: -10px; }

.tip-l, [data-tip][data-tip-left]:before {
  top: -10px;
  bottom: auto;
  left: auto;
  right: 100%;
  margin-right: 5px; }

.tip-r, [data-tip][data-tip-right]:before {
  top: -10px;
  bottom: auto;
  left: 100%;
  margin-left: 5px; }

.tip-static {
  position: relative;
  display: block; }
  .tip-static:after {
    bottom: -5px;
    left: 10px;
    border-width: 5px 5px 0 5px;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; }
  .tip-static-top-right:after {
    left: auto;
    right: 10px; }
  .tip-static-bottom:after {
    bottom: auto;
    top: -5px;
    left: 10px;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; }
  .tip-static-bottom-right:after {
    bottom: auto;
    left: auto;
    top: -5px;
    right: 10px;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; }
  .tip-static-left:after {
    bottom: auto;
    left: auto;
    top: 10px;
    right: -5px;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.8); }
  .tip-static-right:after {
    bottom: auto;
    top: 10px;
    left: -5px;
    border-width: 5px 5px 5px 0;
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; }

[data-tip] {
  position: relative;
  display: inline-block;
  cursor: default; }
  [data-tip]:before {
    position: absolute;
    display: none; }
  [data-tip]:after {
    display: none; }
  [data-tip][data-tip-top-right]:before {
    left: auto;
    right: -10px; }
  [data-tip][data-tip-top-right]:after {
    left: auto;
    right: 0; }
  [data-tip]:hover, [data-tip]:focus {
    outline: none; }
  [data-tip]:hover:before, [data-tip]:hover:after, [data-tip]:focus:before, [data-tip]:focus:after {
    display: block; }