Pure HTML5 / CSS Tooltip Solution

This is a simplest CSS solution to create custom tooltips on any DOM elements using html5 data attribute and CSS ::before & ::after selectors.

How to use it:

Add a custom tooltip to an element using data-tip attribute.

<span class="tool" data-tip="Hyper Text Makeup Language">HTML</span>

The core CSS styles for the custom tooltip.

.tool {
  cursor : help;
  position : relative;
}
.tool::before, .tool::after {
  position : absolute;
  left : 50%;
  opacity : 0;
  z-index: -100;
}
.tool:hover::before, .tool:focus::before, .tool:hover::after, .tool:focus::after {
  opacity : 1;
  z-index: 100;
}
.tool::before {
  border-style : solid;
  border-width : 1em .75em 0 .75em;
  border-color : #3e474f transparent transparent transparent;
  bottom : 100%;
  margin-left : -.5em;
  content : " ";
}
.tool::after {
  background : #3e474f;
  border-radius : .25em;
  bottom : 180%;
  color : white;
  width : 17.5em;
  padding: 1em;
  margin-left : -8.75em;
  content : attr(data-tip);
}