[data-title] {
  position:relative;  
  font-size: 0px; /*optional styling*/ 
  position: relative;
}

[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  top: 32px;
  display: inline-block; 
  padding: 3px 6px;
  border-radius: 2px;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-family: sans-serif;
  white-space: pre; 
  z-index:20;   
}
[data-title1]:hover::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 8px;
  display: inline-block; 
  color: #fff;
  border: 8px solid transparent;	
  border-bottom: 8px solid #000;
  z-index:20;  
}