Design System

Tooltip

The tooltip component, prefixed by gds-tooltip, is a small explanatory message that appears when hovering over an element. Tooltips require a data-tooltip attribute containing their message.

Prototypes Page 

<span class="gds-tooltip--right" data-tooltip="I am a tooltip!">
    <button type="button" class="gds-button gds-button--primary">Button with tooltip</button>
</span>

Optional classes:

  • gds-tooltip--top
  • gds-tooltip--right
  • gds-tooltip--bottom
  • gds-tooltip--left
  • gds-tooltip--primary
  • gds-tooltip--success
  • gds-tooltip--info
  • gds-tooltip--warning
  • gds-tooltip--danger
  • gds-tooltip--lg
  • gds-tooltip--always
  • gds-tooltip--no-animate
  • gds-tooltip--bounce
  • gds-tooltip--dark
← ToolbeltTree →