[data-tooltip] {
  position: relative;
  cursor: pointer;
}
[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  bottom: 30px;
  /* right: -250px; */
  left: auto;
  width: 250px;
  z-index: 100;
  padding: 10px;
  text-decoration: none;
  /* font: 14px normal; */
  font-family: Segoe UI;
  font-size: 0.9rem;
  border: 1px solid black;
  border: 1px solid #668290;
  background: #CCD5DA;
  color: #002F47;
  border-radius: 5px;
  box-shadow: 3px 3px 10px grey;
}
[data-tooltip]:hover:before {
  display: inline-block;
}



/* no html:

<a href="#" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Lorem ipsum.</a>
<br><br>
<div data-tooltip="Lorem ipsum dolor sit amet">Lorem ipsum.</div>
<br>
<span data-tooltip="Lorem ipsum dolor sit amet">Lorem ipsum.</span>

 */