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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team