Working together for the ultimate brand experience

Royal Canin Design Language

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>

Copied!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>

Copied!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>

Copied!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>

Copied!