Tooltip - Web Component ​

Browser support ​

Parameters ​

The Web component uses the <z-tooltip> tag:

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

NameTypeDescription
textstringThe text to be displayed inside the tooltip.
config
(optional)		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.
content
(optional)		stringThe text to be hovered

text ​

The text parameter is used to define the text that will be displayed when the user hovers the element.

Hover me

config ​

The config parameter is used to define the tooltip side and size. Following the pattern: <side><?:size>

side ​

The side parameter is used to define the position of the tooltip. Can be top, top-right, top-left, bottom, bottom-right or bottom-left.

Hover meHover meHover meHover meHover meHover me
size ​

The size parameter is used to define the size of the tooltip. Can be xs, s ,m or l.

Hover me Hover me Hover me

Both background color and text color can be customized using the --z-tooltip--bg and --z-tooltip--color CSS variables.

Hover me

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/tooltip.js"></script>
<script type="module" src="/0.4.3/@zurich/web-components/icon.js"></script>
Code
html
<z-tooltip config="top" text="Add to calendar">
  <z-icon icon="calendar:line"></z-icon>
</z-tooltip>
<z-tooltip config="bottom-right" text="Information text">
  <z-icon icon="info:line"></z-icon>
</z-tooltip>