Custom Tooltip By Pure CSS

What Is A Tooltip?

A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture

HTML

 <span data-tooltip="small popups that appear when hovering">tooltips</span>

CSS

span[data-tooltip]{ position:relative;}

span[data-tooltip]:hover:after{  
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: 14px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}