Tooltips for Goldilocks CSS

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

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
Layer:	`extras`

Examples



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

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

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

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

                <p class="tooltip"
                    data-tooltip="This tooltip &#10; has multiline text &#10; that can be shown" >
                    .tooltip multiline
                </p>