MwxpLd

index.html

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud <span class="tooltip tooltip-top" data-tooltip="Hello, I'm a tooltip on Top!">Tooltip on top</span> laboris nisi ut aliquip ex ea commodo
  consequat.</p>

style.css

p {
	max-width: 800px;
	margin:30px auto;
	font-size: 22px;
	line-height: 35px;
  font-family:arial;
}

/* Some basic styling to notify users
   about the tooltips*/
.tooltip {
  color: green;
  text-decoration: none;
}

.tooltip:hover {
  color: red;
  position: relative;
}

/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0; 
  bottom: 100%;
  white-space: nowrap; 
  z-index: 20px;

  background-color: #000;
  color: #fff;
}
/* Tooltip on Bottom */
.tooltip-bottom[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}
/* Tooltip on Right */
.tooltip-right[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}
/* Tooltip on Left */
.tooltip-left[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  right: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}

Tool Tip with HTML5 DataAttributre

MwxpLd
------


Forked from [Andor Nagy](http://codepen.io/andornagy/)'s Pen [waOwZv](http://codepen.io/andornagy/pen/waOwZv/).

A [Pen](http://codepen.io/texxs/pen/MwxpLd) by [Texx Smith](http://codepen.io/texxs) on [CodePen](http://codepen.io/).

[License](http://codepen.io/texxs/pen/MwxpLd/license).