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