Tooltips

<tk-button class="l-inline-block">Top (Default)</tk-button>
<tk-tooltip>Tooltip on the top</tk-tooltip>

<tk-button class="l-inline-block">Right</tk-button>
<tk-tooltip position="right">Tooltip on the right</tk-tooltip>

<tk-button class="l-inline-block">Left</tk-button>
<tk-tooltip position="left">Tooltip on the left</tk-tooltip>

<tk-button class="l-inline-block">Bottom</tk-button>
<tk-tooltip position="bottom">Tooltip on the bottom</tk-tooltip>

<tk-button class="l-inline-block">Top Left</tk-button>
<tk-tooltip position="top-left">Tooltip on the top-left</tk-tooltip>

<tk-button class="l-inline-block">Bottom Left</tk-button>
<tk-tooltip position="bottom-left">Tooltip on the bottom-left</tk-tooltip>

<tk-button class="l-inline-block">Top Right</tk-button>
<tk-tooltip position="top-right">Tooltip on the top-right</tk-tooltip>

<tk-button class="l-inline-block">Bottom Right</tk-button>
<tk-tooltip position="bottom-right">Tooltip on the bottom-right</tk-tooltip>

<div class="mb-3x">
  <tk-button class="l-inline-block">Small (Default)</tk-button>
  <tk-tooltip>
    The small size should be good for most of your tooltip needs.
  </tk-tooltip>
</div>

<div class="mb-3x">
  <tk-button class="l-inline-block">Medium</tk-button>
  <tk-tooltip size="medium">
    The max width for the medium size tooltip is about twice the max width of the small size.
  </tk-tooltip>
</div>

<div>
  <tk-button class="l-inline-block">Large</tk-button>
  <tk-tooltip size="large">
    This is the large size tooltip. Although you may be itching to try it out, please refrain from using this size. It looks a little out of place, and the design team would probably not approve.
  </tk-tooltip>
</div>

<div class="mb-3x">
  <tk-button class="l-inline-block">Wrapped (Default)</tk-button>
  <tk-tooltip>
    This tooltip shows what a link looks like when the text is wrapped. Here's my link, <a href="#" class="tooltip__link">harryjamespotter@hogwartsschool.com</a>
  </tk-tooltip>
</div>

<div>
  <tk-button class="l-inline-block">Not Wrapped</tk-button>
  <tk-tooltip no-wrap="true">
    This tooltip shows what a link looks like when no-wrap is set to true. Here's my link, <a href="#" class="tooltip__link">harryjamespotter@hogwartsschool.com</a>
  </tk-tooltip>
</div>

<div class="mb-3x">
  <tk-button class="l-inline-block">Enabled (Default)</tk-button>
  <tk-tooltip enable="true">
    Since the enable attribute is set to true by default, you can remove it.
  </tk-tooltip>
</div>

<div>
  <tk-button class="l-inline-block" status="disabled">Disabled</tk-button>
  <tk-tooltip enable="false">
    This tooltip should never appear because it is disabled.
  </tk-tooltip>
</div>

<tk-button class="l-inline-block">Visible</tk-button>
<tk-tooltip visible="true" position="right">
  This tooltip is visible after initializing or refreshing the page. It acts as a normal tooltip after the mouse moves over the button or tooltip.
</tk-tooltip>

<tk-dropdown full-height="true" trigger-text="My Items">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Special Item #1
    </button>
    <tk-tooltip position="left">Tooltip on item #1</tk-tooltip>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Special Item #2
    </button>
    <tk-tooltip position="left">Tooltip on item #2</tk-tooltip>
  </tk-dropdown-item>
</tk-dropdown>

<tk-dropdown full-height="true" trigger-text="My Items">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Special Item #1
    </button>
    <tk-tooltip position="left" delay="false">
      Tooltip on item #1
    </tk-tooltip>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Special Item #2
    </button>
    <tk-tooltip position="left" delay="false">
      Tooltip on item #2
    </tk-tooltip>
  </tk-dropdown-item>
</tk-dropdown>