Tooltip

...

Browser support

...

Parameters

The CSS component uses a <em> or a <td> tag inside a table.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-tooltip	string	The main parameter has three components following the pattern: <side><?:size>. side: The position of the tooltip. Can be top, top-right, top-left, bottom, bottom-right or bottom-left. size: The size of the tooltip. Can be xs, s ,m or l.
tooltip-text	string	The text to be displayed inside the tooltip.
content	string	The text to be hovered

Playground

Customization

HTML Examples

Imports

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

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

Code

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