Overview

Tooltips display informative text when users hover over, focus on, or tap an element.

---

Usage

Position your tooltip using the sgds-tooltip is-tooltip-*position* class.

<button
    href="!#"
    type="button"
    class="sgds-button is-primary sgds-tooltip"
    data-tooltip="This is a tooltip"
>
    Default tooltip
</button>
<button
    href="!#"
    type="button"
    class="sgds-button is-primary sgds-tooltip is-tooltip-right"
    data-tooltip="This is a tooltip"
>
    Right tooltip
</button>
<button
    href="!#"
    type="button"
    class="sgds-button is-primary sgds-tooltip is-tooltip-bottom"
    data-tooltip="This is a tooltip"
>
    Bottom tooltip
</button>
<button
    href="!#"
    type="button"
    class="sgds-button is-primary sgds-tooltip is-tooltip-left"
    data-tooltip="This is a tooltip"
>
    Left tooltip
</button>

---

Colours

Assign colours to your tooltip using the sgds-tooltip is-tooltip-*stateColor* class.

Component code

<button
    href="!#"
    type="button"
    class="sgds-button sgds-tooltip is-tooltip-primary"
    data-tooltip="This is a tooltip"
>
    primary
</button>

<button
    href="!#"
    type="button"
    class="sgds-button sgds-tooltip is-tooltip-secondary"
    data-tooltip="This is a tooltip"
>
    secondary
</button>

<button
    href="!#"
    type="button"
    class="sgds-button sgds-tooltip is-tooltip-success"
    data-tooltip="This is a tooltip"
>
    success
</button>

<button
    href="!#"
    type="button"
    class="sgds-button sgds-tooltip is-tooltip-warning"
    data-tooltip="This is a tooltip"
>
    warning
</button>

<button
    href="!#"
    type="button"
    class="sgds-button sgds-tooltip is-tooltip-info"
    data-tooltip="This is a tooltip"
>
    info
</button>

<button
    href="!#"
    type="button"
    class="sgds-button sgds-tooltip is-tooltip-danger"
    data-tooltip="This is a tooltip"
>
    danger
</button>

---

When to use

Tooltips should be used:

• When you want to give a brief description of a feature or page element.
• Information should be brief and helpful to your user.
• For example, in a Form, tooltips help to explain what a certain field does.

Tooltips should not be used for:

• Critical or important information to the user.
• Information that is needed for your users to complete a task.

---

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component