Tooltip - CSS Component

Browser support

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

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/design-tokens/Icons.css" />

<link rel="stylesheet" href="/0.4.0/@zurich/css-components/Tooltip.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/Icon.css" />

Code

<em z-tooltip="top" tooltip-text="Add to calendar"><i z-icon icon="calendar:line"></i></em>
<em z-tooltip="bottom-right" tooltip-text="Information text"><i z-icon icon="info:line"></i></em>