tooltip.css

/* -------------------------------------------------------------------
  Light  Weight Tooltip using css-only

  @author mohammad ahshan danish

  <div class="tooltip" data-tool-tip="I am testing">TEST</div>
  <div class="tooltip" data-tool-tip-left="I am testing tooltip">TEST</div>
--------------------------------------------------------------------*/
[data-tool-tip-left] {
  --background-color:#4b4849;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
}
[data-tool-tip-left]:hover:after, [data-tool-tip-left]:hover:before {
  visibility: visible;
}
[data-tool-tip-left]:after {
  position: absolute;
  content: "";
  border: 10px solid transparent;
  border-left: 10px solid var(--background-color);
  margin-bottom: 10px;
  right: 100%;
  transform: translateX(100%);
  visibility: hidden;
  z-index: 9999;
}
[data-tool-tip-left]:before {
  position: absolute;
  height: 22px;
  padding: 10px;
  padding-inline: 15px;
  font-size: 20px;
  content: attr(data-tool-tip-left);
  white-space: nowrap;
  background-color: var(--background-color);
  color: white;
  border-radius: 8px;
  bottom: 100%;
  margin-bottom: -30px;
  transform: translateX(-99%);
  visibility: hidden;
  z-index: 9999;
}

[data-tool-tip] {
  --background-color:#4b4849;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  z-index: 9999;
}
[data-tool-tip]:hover:after, [data-tool-tip]:hover:before {
  visibility: visible;
}
[data-tool-tip]:before {
  position: absolute;
  content: "";
  border: 10px solid transparent;
  border-bottom: 10px solid var(--background-color);
  bottom: -100%;
  margin-bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  z-index: 9999;
}
[data-tool-tip]:after {
  position: absolute;
  height: 22px;
  padding: 10px;
  padding-inline: 15px;
  font-size: 20px;
  content: attr(data-tool-tip);
  white-space: nowrap;
  background-color: var(--background-color);
  color: white;
  border-radius: 8px;
  bottom: -100%;
  margin-bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  z-index: 9999;
}/*# sourceMappingURL=tooltip.css.map */