Tooltips

Base

Lorem ipsum dolor sit consectetur adipiscing elit.

Position

Top
Right
Left
Bottom (default)

Scripted tip positionning

You can use javascript to position the tip properly. In this case we rely on a child element c-tooltip__tip to draw the tip instead of the ::before pseudo element. The class c-tooltip--js-tip-positionning must be added to the tooltip component.

Lorem ipsum dolor sit consectetur adipiscing elit.

.c-tooltip c-tooltip--js-tip-positionning

No tip

Lorem ipsum dolor sit consectetur adipiscing elit.

Test it!

I'm displayed at the bottom.
I'm displayed at the top.
I'm displayed at the right.
I'm displayed at the left.