a simple tooltip that has been made by Farhan for Ninja Tables

Ninja-tables-Simple-tooltip.css

/*
* a simple tooltip that has been made by Farhan 
*/

/********************************************************
                           HTML 
********************************************************/

<span class="ninja-tooltip" data-tooltip="I'm in top">Ninja Tables</span>

/********************************************************
                           CSS 
********************************************************/
[data-tooltip] {
  position: relative;
  display: inline-block;
}

[data-tooltip]:before, [data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 999999;
}

[data-tooltip]:before {
  content: '';
  position: absolute;
  border-width: 6px;
  border-style: solid;
  border-color: transparent;
}

[data-tooltip]:after {
padding: 6px;
font-size: 14px;
line-height: 16px;
content: attr(data-tooltip);
white-space: nowrap;
border-radius: 4px;
}

[data-tooltip].ninja-tooltip:before {
  border-top-color: #323232;
}

[data-tooltip].ninja-tooltip:after {
  background-color: #323232;
  color: #ecf0f1;
}


[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
  visibility: visible;
  opacity: 1;
}

/********************************************************
                       Position 
********************************************************/
.ninja-tooltip:before, .ninja-tooltip:after {
  left: 50%;
}

.ninja-tooltip:after {
  margin-left: -18px;
}

.ninja-tooltip:before, .ninja-tooltip:after {
  bottom: 100%;
}

.ninja-tooltip:before {
  margin-bottom: -5px;
}

.ninja-tooltip:after {
  margin-bottom: 7px;
}