<!-- Bottom (default) -->
<button id="my-trigger" popovertarget="my-tooltip">
  Hover or click me
</button>
<div id="my-tooltip" class="mdst-tooltip" popover anchor="my-trigger">
  Helpful tooltip text
</div>

<!-- Top -->
<button id="top-trigger" popovertarget="top-tip">Top</button>
<div id="top-tip" class="mdst-tooltip mdst-tooltip--top" popover anchor="top-trigger">
  Above the trigger
</div>

<!-- Left -->
<button id="left-trigger" popovertarget="left-tip">Left</button>
<div id="left-tip" class="mdst-tooltip mdst-tooltip--left" popover anchor="left-trigger">
  Left of the trigger
</div>

<!-- Right -->
<button id="right-trigger" popovertarget="right-tip">Right</button>
<div id="right-tip" class="mdst-tooltip mdst-tooltip--right" popover anchor="right-trigger">
  Right of the trigger
</div>