Tooltip - CSS Component
Playground
Customization
Construction
The CSS component uses a <em> or a <td> tag inside a table, with the z-tooltip HTML custom attribute.
z-tooltip
The z-tooltip attribute is the main attribute used to render the tooltip component. The default version of the attribute will display the tooltip on the bottom-right side of the element, and a m size.
Tooltip text
Apart from the bottom-right position, the tooltip can be displayed on the bottom, bottom-left, top, top-right and top-left sides of the element.
Bottom Bottom-left Top Top-right Top-left
The z-tooltip attribute has one more optional modifier that can be applied in order after the position modifier, using the colon (:) as a separator. The pattern would be: <position>:<?size>.
Possible values for the size modifier are: xs, s, m, l .
Tooltip text Tooltip text Tooltip text
tooltip-text
The tooltip-text attribute is used to define the text of the tooltip.
Tooltip text
Both background and text color of the tooltip can be customized using the --z-tooltip--bg and --z-tooltip--color CSS custom properties, respectively.
Tooltip text
Browser support
Detected engine:
Chromium
Webkit
Gecko