<main>
  <div>
    <label tooltip="play with the Tooltip text">
      <input type="text" value="hello world" />
    </label>
    <div class="examples">
      <p><span tooltip="hello world">Default (up)</span></p>
      <p><span tooltip="hello world" flow="up">Pop Up (explicitly)</span></p>
      <p><span tooltip="hello world" flow="up-left">Pop Up-Left</span> •
        <span tooltip="hello world" flow="up-right">Pop Up-Right</span></p>
      <p><span tooltip="hello world" flow="left">Pop Left</span> •
        <span tooltip="hello world" flow="right">Pop Right</span></p>
      <p><span tooltip="hello world" flow="down-left">Pop Down-Left</span> •
        <span tooltip="hello world" flow="down-right">Pop Down-Right</span></p>
      <p><span tooltip="hello world" flow="down">Pop Down</span></p>
    </div>
  </div>
</main>

<aside>
  <div>
    <textarea cols="30" rows="3" readonly></textarea>
  </div>
</aside>