Tooltips

You can easily add tooltips to your buttons, cards, or any other element using CSS. Here's how to do it:

1. Add the data-tooltip attribute to the element you want to use (e.g. p, h1-h6, span, div).
2. Add the tooltip class to the element, followed by the direction you want the tooltip to appear (e.g. to-top, to-right, to-bottom, or to-left).

For example, if you want a tooltip to appear above a button, you would add the following classes to the button element: tooltip to-top.

Here's an example:

<button data-tooltip="This is a tooltip" class="tooltip to-top">Hover over me</button>

When you hover over the button, the tooltip will appear above it.

Note that you will need to add CSS styles to the tooltip class to define the appearance of the tooltip itself (e.g. background color, font size, etc.).

---

Default tooltips

By Hover

Tip topTip rightTip bottomTip left

By focused

Tip topTip rightTip bottomTip left

---

Color tooltips

You can choose from several color options for your tooltips, including:

To set the color of your tooltip, simply add the corresponding class to the tooltip class, like this: Default, Primary, Secondary, Tertiary, Info, Danger, Warning, Success, White, Gray, and Dark.

<button
  data-tooltip="This is a primary tooltip"
  class="tooltip to-top is-primary"
  >
    Primary
</button>

Here's an example using the is-primary class to create a blue tooltip.

Note that you will need to define the styles for each color class in your CSS, so that the tooltip appears in the desired color.

Tip defaultTip primaryTip secondaryTip tertiaryTip dangerTip warningTip successTip infoTip grayTip darkTip white

---

Style tooltips

You can customize the appearance of your tooltips by using the following classes:

• is-filled: Adds a filled background to the tooltip.
• is-rounded: Makes the tooltip full-rounded corners.
• is-flat: Removes any shadows and corners rounded from the tooltip.

To use these classes, simply add them to the tooltip class, like this:

<button
  data-tooltip="This is a filled, rounded tooltip"
  class="tooltip to-top is-primary is-filled is-rounded">
  Button
</button>
<!-- or -->
<button
  data-tooltip="This is a filled, rounded tooltip"
  class="tooltip to-top is-primary is-filled is-flat">
  Button
</button>

Here's an example using the is-filled and is-rounded classes to create a tooltip with a filled background and rounded corners.

Note that you will need to define the styles for each class in your CSS, so that the tooltip appears in the desired style.

Tip defaultTip primaryTip secondary