<.tooltip text="hello">
  <.button>Hover me</.button>
</.tooltip>

<.tooltip open text="hello">
  <.button>Force open</.button>
</.tooltip>

<.tooltip direction="top" text="top">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip direction="bottom" text="bottom">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip direction="left" text="left">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip direction="right" text="right">
  <.button>Hover me</.button>
</.tooltip>

<.tooltip color="primary" text="primary">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip color="secondary" text="secondary">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip color="accent" text="accent">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip color="info" text="info">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip color="success" text="success">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip color="warning" text="warning">
  <.button>Hover me</.button>
</.tooltip>
<.tooltip color="error" text="error">
  <.button>Hover me</.button>
</.tooltip>