<h3>Design guide</h3>

<p>Tooltips provide additional explanation for UI elements. They are triggered on hover or focus. Keep the tooltip content clear and concise.</p>

<ul>
  <li><b>Icon tooltip</b></li>
  Used to clarify the meaning of an icon button. The icon tooltip content should only contain one to two words.

  <img style="max-width: 500px; width: 100%;" src="./icon_tooltip.jpg" alt="Icon tooltip example" />

  <li><b>Helper tooltip</b></li>
  Used to provide additional help or define an item or term.

  <img style="max-width: 500px; width: 100%;" src="./helper_tooltip.jpg" alt="Helper tooltip example" />

  <li><b>Interactive tooltip</b></li>
  Interactive Tooltips can contain text and other interactive elements such as a Button or a Link. They are dismissed by clicking outside of the tooltip.

  <img style="max-width: 500px; width: 100%;" src="./interactive_tooltip.jpg" alt="Interactive tooltip example" />
</ul>

<h3>Themes</h3>
<p>You can choose one of the themes to modify the look of the Tooltip.</p>

<img style="max-width: 700px; width: 100%;" src="./tooltip_themes.png" alt="Themes example" />
