Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element.


Position your tooltip using the sgds-tooltip is-tooltip-*position* class.
Component Code
<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>

When you should use this component

Use the tooltip component when you want to give a brief description of a feature or page element. Information inside the tooltip should be brief and helpful to the user. E.g in a form, tooltip to explain what a certain field does.

When you should consider something else

Tooltips should never be used for critical or important information to the user. They should also not be used for information that is vital to the user for them to complete a task.

It would be more appropriate to use well formatted hint text instead of tooltips when you want user to fill in critical or important information in a form.


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>

Feedback

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

Chat with the team