CSS tooltip

Create tooltip using pseudo-element that gets content from data-* attribute

by Mike Jacobson

HTML

<button type="button" class="tooltip" data-tip="This css tooltip">
   I have a Tooltip
</button>

CSS

button {
  margin-top: 30px;
}

.tooltip[data-tip]:not([data-tip=""])::before {
  content: attr(data-tip);
  position: absolute;
  background-color: rgba(0,0,0,.8);
  color: #fff;
  padding: 15px 10px;
  border-radius: 3px;
  max-width: 300px;
  width: 250%;
  left: 50%;
  transform: translate(-50%, 0);
  /* bottom: calc(100% + 12px); */
}