Tooltips
Tooltips are small pop-up boxes that can be attached to any kind of element and show small bits of helpful information.
Tooltip component
Tooltips are defined by applying the tooltip along with a data-tooltip attribute that contains the text to be attached inside the tooltip. Tooltips are completely written in CSS and thus, have no javascript dependencies.
By default tooltips appear at the top of the element they are applied on, but their position can be changed by combining the tooltip class with tooltip-bottom, tooltip-right or tooltip-left.
Code output
| Tooltip top | Tooltip bottom | Tooltip right | Tooltip left |
HTML Markup
Copy<span class="tooltip" data-tooltip="Tooltip content">Tooltip top</span>
<span class="tooltip tooltip-bottom" data-tooltip="Tooltip content">Tooltip bottom</span>
<span class="tooltip tooltip-right" data-tooltip="Tooltip content">Tooltip right</span>
<span class="tooltip tooltip-left" data-tooltip="Tooltip content">Tooltip left</span>
Responsive tooltips
Responsive tooltip classes have been developed to ensure that the tooltips are always visible inside the viewport at all screen resolution tiers.
The responsive tooltip classes are defined as tooltip-{affix}-{modifier} where affix is one of the 5 responsive tier affixes xs, sm, md, lg, xl and where {modifier} is either top, right, bottom or left depending on the desired position on the specified resolution tier. Responsive classes can be combined together to render tooltips in different positions at different screen resolution tiers.
Consult the Responsive display classes section, for a more detailed description of the responsive classes behavior.
In the following example, the tooltip is positioned at the bottom for the two extra small resolution tiers, on the left for the small resolution tier, on the right for the medium resolution tier and at the top for large resolution tiers and beyond.
Code output
| Responsive tooltip |
HTML Markup
Copy<span class="tooltip tooltip-xxs-bottom tooltip-xs-bottom tooltip-sm-left tooltip-md-right tooltip-lg-top" data-tooltip="Tooltip content">Responsive tooltip</span>