[tooltip] { position: relative; }
[tooltip]::before {
  content: attr(tooltip); font-size: smaller; text-align: center;
	display: inline-block; position: absolute; bottom: 50%; right: -5em;
  background: #333; color: #FFF; padding: 5px; border-radius: 5px;
  opacity:0; transition:0.3s; z-index: 99999; padding: 0.2em 0.8em;
  pointer-events: none; max-width: 35em; white-space: normal; min-width: 15em;
}
[tooltip]:hover::before { opacity:1; bottom: 100%; }