Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

Tooltips

Tooltips are used to highlight or emphasise specific elements on a page (for example a form field). They are positioned elements which sit relative to an element and can sit above, below or to the sides of that element. The arrow position will be changed dynamically to correctly point to the element it’s referencing.

Usage

<button class="rc-btn rc-btn--two" title="Top" data-tooltip-placement="top" data-tooltip="top-tooltip">Top</button>
<div id="top-tooltip" class="rc-tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<button class="rc-btn rc-btn--two" title="Bottom" data-tooltip-placement="bottom" data-tooltip="bottom-tooltip">Bottom</button>
<div id="bottom-tooltip" class="rc-tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<button class="rc-btn rc-btn--two" title="Right" data-tooltip-placement="right" data-tooltip="right-tooltip">Right</button>
<div id="right-tooltip" class="rc-tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

<button class="rc-btn rc-btn--two" title="Left" data-tooltip-placement="left" data-tooltip="left-tooltip">Left</button>
<div id="left-tooltip" class="rc-tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

Working together for the ultimate brand experience

Tooltips

Usage