@arthur-lobo/custom-tooltip/dist/index.css

A css package to use custom tooltips on your site

:host {
  display: inline-block;
  cursor: pointer;
}

:root {
  --tooltip-tag-size: 5px;
  --tooltip-max-width: 120px;
  --background-color: #161B22;
  --border-color: gray;
  --color: #DCE3EA;
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip > .tooltip-text {
  max-width: var(--tooltip-max-width);
  width: max-content;
  background-color: var(--background-color);
  color: var(--color);
  text-align: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
.tooltip:hover > .tooltip-text, .tooltip:hover::after, .tooltip:hover::before {
  visibility: visible;
  opacity: 1;
}

.tooltip::after, .tooltip::before {
  content: "";
  margin-left: var(--margin-left);
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color) transparent transparent transparent;
  --top: unset;
  --bottom: unset;
  --left: unset;
  --right: unset;
  top: var(--top);
  bottom: var(--bottom);
  left: var(--left);
  right: var(--right);
  --rotate: 0deg;
  --translateY: 0;
  --translateX: 0;
  transform: rotate(var(--rotate)) translateY(var(--translateY)) translateX(var(--translateX));
}
.tooltip::after, .tooltip::before,
.tooltip > .tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  opacity: 0;
}
.tooltip::after {
  --margin-left: calc(var(--tooltip-tag-size) * -1);
  --border-width: var(--tooltip-tag-size);
  --border-color: var(--background-color);
  transition: opacity 0s;
}
.tooltip::before {
  --margin-left: calc(calc(var(--tooltip-tag-size) + 1px) * -1);
  --border-width: calc(var(--tooltip-tag-size) + 1px);
}

.tooltip.top > .tooltip-text,
.tooltip:not(.bottom, .horizontal-left) > .tooltip-text {
  bottom: calc(100% + var(--tooltip-tag-size));
}

.tooltip.bottom .tooltip-text {
  top: calc(100% + var(--tooltip-tag-size));
}

.tooltip:not(:is(.right, .left, .horizontal-left)) > .tooltip-text:not(:is(.right, .left)) {
  left: 50%;
  translate: -50%;
}

.tooltip.right .tooltip-text {
  left: 0%;
}

.tooltip.left .tooltip-text {
  right: 0%;
  translate: 0%;
}

.tooltip.horizontal-left .tooltip-text {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  translate: calc(-100% - var(--tooltip-tag-size) * 2);
}

.tooltip.center::after, .tooltip.center::before,
.tooltip:not(:is(.horizontal-left))::after,
.tooltip:not(:is(.horizontal-left))::before {
  --left: 50%;
}

.tooltip.bottom::after, .tooltip.bottom::before {
  --top: 100%;
  --rotate: 180deg;
  --translateY: 50%;
}
.tooltip.bottom::after {
  --translateY: calc(50% - 1px);
}

.tooltip.top::after, .tooltip.top::before,
.tooltip:not(.bottom, .horizontal-left)::after,
.tooltip:not(.bottom, .horizontal-left)::before {
  --bottom: 100%;
  --translateY: 50%;
}
.tooltip.top::after,
.tooltip:not(.bottom, .horizontal-left)::after {
  --bottom: calc(100% + 1px);
}

.tooltip.horizontal-left::after, .tooltip.horizontal-left::before {
  --top: 50%;
  --left: calc(var(--tooltip-tag-size) * -1);
  /*With rotate -90deg translateX will translate in the Y Axis*/
  --rotate: -90deg;
  --translateX: 50% ;
}
.tooltip.horizontal-left::after {
  --left: calc(calc(var(--tooltip-tag-size) + 2px)* -1);
}