Tooltip - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
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
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Tooltip.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Icon.css" />
Code
html
<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>