1---
 2interface Props {
 3  tip: string;
 4  position?: 'top' | 'bottom' | 'left' | 'right';
 5}
 6
 7const { tip, position } = Astro.props;
 8const tooltipClass = (() => {
 9  switch (position) {
10    case 'top':
11      return 'tooltip tooltip-top';
12    case 'bottom':
13      return 'tooltip tooltip-bottom';
14    case 'left':
15      return 'tooltip tooltip-left';
16    case 'right':
17      return 'tooltip tooltip-right';
18    default:
19      return 'tooltip tooltip-top';
20  }
21})();
22---
23
24<div class={tooltipClass} data-tip={tip}>
25  <slot />
26</div>