Commentary

Tooltips provide context information for any element, which often are strongs. The information appears on hover and focus and is appropriate for desktop computers. See tooltip guidelines for a more detailed discussion

The max-width for the tooltip is 30 characters. Multiline text will wrap to the next line. Try to keep the text short and to the point.

Note: Mobile / touch devices do not respond to a :hover user action. Mobile / touch devices do respond to ontouchstart event that can use JavaScript to emulate a hover user action.

Usage

Classes:
.tooltip Defines an element that has text to show from the data-tooltip attribute.
.tooltip-right, .tooltip-left, .tooltip-bottom Define the callout position. By default, the tooltips appear above the element.
Dependencies:
File: tooltip.css
Variables: --bg-main-invert, --radius, --size-7, --ghost, --weight-normal
Layer: extras

Examples

.tooltip (default top) .tooltip .tooltip-right .tooltip .tooltip-bottom .tooltip .tooltip-left 


                <strong class="has-text-primary tooltip"  data-tooltip="Top Tooltip Text" role="tooltip" >
                    .tooltip (default top)
                </strong>

                <strong class="has-text-secondary tooltip tooltip-right"  data-tooltip="Right Tooltip Text" role="tooltip" >
                    .tooltip .tooltip-right
                </strong>

                <strong class="has-text-complement tooltip tooltip-bottom"  data-tooltip="Bottom Tooltip Text" role="tooltip" >
                    .tooltip .tooltip-bottom
                </strong>

                <span class="tooltip tooltip-left" data-tooltip="Left Tooltip Text role="tooltip" ">
                    <a href="#page-top">.tooltip .tooltip-left</a>
                </span>

                <p class="tooltip"
                    data-tooltip="This tooltip has multiline text that can be shown" role="tooltip" >
                    .tooltip multiline
                </p>