Tooltips

<button class="btn--primary mb-3x">Top (Default)</button>
<tk-tooltip>Tooltip on the top</tk-tooltip>

<button class="btn--primary mb-3x">Right</button>
<tk-tooltip position="right">Tooltip on the right</tk-tooltip>

<button class="btn--primary mb-3x">Left</button>
<tk-tooltip position="left">Tooltip on the left</tk-tooltip>

<button class="btn--primary mb-3x">Bottom</button>
<tk-tooltip position="bottom">Tooltip on the bottom</tk-tooltip>

<button class="btn--primary mb-3x">Top Left</button>
<tk-tooltip position="top-left">Tooltip on the top-left</tk-tooltip>

<button class="btn--primary mb-3x">Bottom Left</button>
<tk-tooltip position="bottom-left">Tooltip on the bottom-left</tk-tooltip>

<button class="btn--primary mb-3x">Top Right</button>
<tk-tooltip position="top-right">Tooltip on the top-right</tk-tooltip>

<button class="btn--primary">Bottom Right</button>
<tk-tooltip position="bottom-right">Tooltip on the bottom-right</tk-tooltip>

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

<button class="btn--primary mb-3x">Medium</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>

<button class="btn--primary">Large</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>

<button class="btn--primary mb-3x">Wrapped (Default)</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>

<button class="btn--primary">Not Wrapped</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>

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

<button class="btn--primary">Disabled</button>
<tk-tooltip enable="false">
  This tooltip should never appear because it is disabled.
</tk-tooltip>

<button class="btn--primary" onClick="modal.openModal()">Open Modal</button>
<tk-modal id="modal" version="2">
  <tk-modal-header>This Modal's Header</tk-modal-header>
  <tk-modal-body>
    <button class="btn--primary mb-3x">Right</button>
    <tk-tooltip position="right">Tooltip on the right</tk-tooltip>
  </tk-modal-body>
  <tk-modal-footer>
    <button
      class="btn--tertiary mr-2x"
      onClick="modal.closeModal('Close')"
    >
      Close
    </button>
    <button
      class="btn--primary"
      onClick="modal.closeModal('OK')"
    >
      OK
    </button>
  </tk-modal-footer>
</tk-modal>

<button class="btn--primary">Visible</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>