/* Tooltip base */
.hoverme-tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 9999;
}

/* Arrow */
.hoverme-tooltip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
}

/* Positions - arrows will be positioned dynamically */
.hoverme-top { transform: translateY(-8px); }
.hoverme-top::after {
  top: 100%;
  border-top-color: #333;
}

.hoverme-bottom { transform: translateY(8px); }
.hoverme-bottom::after {
  bottom: 100%;
  border-bottom-color: #333;
}

.hoverme-left { transform: translateX(-8px); }
.hoverme-left::after {
  left: 100%;
  border-left-color: #333;
}

.hoverme-right { transform: translateX(8px); }
.hoverme-right::after {
  right: 100%;
  border-right-color: #333;
}