Framework
v1.0.116Tooltips
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.
Tooltip
Top
default
Tooltip
Right
Tooltip
left
Tooltip
Bottom
Tooltip
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).
Tooltip
Missions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at eros scelerisque, luctus metus quis, lacinia dui. Vestibulum sit amet ipsum nunc.
Top
default
Right
left
Bottom
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).