/* 
  <link rel="stylesheet" href="tooltip.css" />
  <script defer src="tooltip.js"></script>

  data-tooltip="Tooltip"
  class="tooltip top|right|bottom|left"
*/

* {
  --primary: white;
  --secondary: #001341;
  --tertiary: #254694;
}

.tooltip {
  min-width: 120px;
  width: max-content;
  background-color: var(--secondary);
  outline: 1px solid var(--tertiary);
  color: var(--primary);
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 99999;
  pointer-events: none;
}

.tooltip.top {
  transform: translate(-50%, -5px);
}
.tooltip.right {
  transform: translate(5px, -50%);
}
.tooltip.bottom {
  transform: translate(-50%, 5px);
}
.tooltip.left {
  transform: translate(-5px, -50%);
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  background-color: var(--secondary);
  border-left: 1px solid var(--tertiary);
  border-top: 1px solid var(--tertiary);
}

.tooltip.top::after {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(225deg);
}
.tooltip.right::after {
  top: 50%;
  left: -6px;
  transform: translateY(-50%) rotate(315deg);
}
.tooltip.bottom::after {
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.tooltip.left::after {
  top: 50%;
  right: -6px;
  transform: translateY(-50%) rotate(135deg);
}