Commentary

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

Multiline text can be used with & #10; as the HTML code for newline or \n. Note that the css attr() function will not reparse a string value and hence the string will need valid HTML codes for control characters.

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, --text-invert, --weight-medium

Examples


                <button type="button"  class="is-primary tooltip" data-tooltip="Top Tooltip Text">
                    .tooltip (default top)
                </button>

                <button type="button"  class="is-secondary" >
                    <span class="tooltip tooltip-right" data-tooltip="Right Tooltip Text">.tooltip .tooltip-right</span>
                </button>

                <button type="button"  class="is-tertiary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">
                    .tooltip .tooltip-bottom
                </button>

                <button type="button"  class="is-link tooltip tooltip-left" data-tooltip="Left Tooltip Text">
                    .tooltip .tooltip-left
                </button>

                <button type="button"  class="is-link tooltip tooltip-right"
                        data-tooltip="This tooltip has  &#10;  multiline text &#10; that can be shown">
                    .tooltip multiline
                </button>