Tooltip

GEM's tooltips are very short text labels which pop up to give users helpful information. A tooltip explains what an element of the user interface is, and what it does.

Status
Released
Version

2.0.1

Last updated

25 Nov 2019

Top aligned

Left aligned

Right aligned

Bottom aligned

Placement

GEM's tooltips can be aligned to the top, bottom, right or left.

Behaviour

Tooltips appear when the user hovers over, clicks or focuses on the info icon near a UI element.

Content

Tooltips must have clear, concise content. They should provide additional information – useful, but nonessential.

Colour

GEM tooltips are always #415364 blue.

Tooltip Styles

Tooltip Primary - Top

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="top"></button>

Tooltip - Top

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="top"></button>

Tooltip - Bottom

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="bottom"></button>

Tooltip - Left

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="left"></button>

Tooltip - Right

                        <button type="button" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="right"></button>

Tooltip - text example

Are you a local or international student? 

                        <a href="#" class="tooltip" role="tooltip" data-tooltip-content="This is an example of a tool tip" data-tooltip-position="top">Text example</a>