6.20 Tooltip View in a new window

Tooltip pops up on hover or focus and displays help text to the user.

Twig: components/tooltip/tooltip.twig

Default example

If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.

Tooltip left aligned above parent span.

If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.

Tooltip right aligned above parent span.

If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.

Tooltip aligned to the right of the parent span.

If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.

Markup 
<p>If you hover over the blue word you'll find that I have a <span class="tooltip__anchor {{ modifier_class }}" tabindex="0">tooltip <span class="tooltip">2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course.</span></span> to display containing help or aside information.</p>