Tooltip - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

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

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

Name	Type	Description	Slot
text	string	The 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	string	The text to be hovered	default

The available slots for the component are:

Name	Tags	Description
default	span

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

<link rel="stylesheet" href="/0.5.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.2/@zurich/web-components/tooltip.js"></script>
<script type="module" src="/0.5.2/@zurich/web-components/icon.js"></script>

Code

<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>