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.
<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>

Assign colours to your tooltip using the sgds-tooltip is-tooltip-*stateColor* class.
<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>

Guidelines
  • Tooltips can be attached to any active element (icons, text links, buttons, etc.) on a page to provide descriptions or explanations. Thus, tooltips are highly contextual and specific and don’t explain the bigger picture or entire task flow.
  • Tooltips should not be used to display vital information for task completion.
  • Tips that pop up on pages to inform users about new features or how to use a specific functionality are not tooltips.
  • Because tooltips are initiated by a hover gesture, they can be used only on devices with a mouse or keyboard. They are not normally available on touchscreens.
Source: NNG Group
Feedback

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

Chat with the team