Framework

Tooltips

Structure

You can display simple tootltips by adding a [data-tooltip="tooltip text"] attribute on any element. The tooltip is creaed as a pseudo element on the element itself, meaning it may be hidden if one of his parents has an overflow hidden rule.

Position

Top

default

Right

left

Bottom

Responsive positioning

You can change the position of the tooltip based on the screen size using the following class name:.{xx}:tooltip-{position}.
{xx} can be xs, sm, md, lg, xl.

In this example, the left tooltip will be displayed on the right above 1024px (lg).

Attention responsive positioning

You can change the position of the tooltip based on the screen size using the following class name:.{xx}:tooltip-{position}.
{xx} can be xs, sm, md, lg, xl.

In this example, the bottom tooltip will be displayed on the right above 1024px (lg).