.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #000;
}

.tooltip::before,
.tooltip::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 10;
}

.tooltip::after {
    content: attr(data-tooltip);
    padding: 10px 15px;
    text-align: center;
    width: 112px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip:hover::before,
.tooltip:hover::after,
.tooltip.hover::after {
  opacity: 1;
  visibility: visible;
}
/* ダークモード用スタイル */
/* bodyにnts-tooltip-darkクラスが付いている場合、その中の.tooltipにスタイルを適用 */
.nts-tooltip-dark .tooltip {
    border-bottom: 1px dotted #888;
}

.nts-tooltip-dark .tooltip::after {
    background-color: #e0e0e0;
    color: #111;
}