Tooltip - Web Component

...

Browser support

Parameters

The Web component uses a <z-tooltip> tag.

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

Name	Type	Description
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 (optional)	string	The text to be hovered

Playground

Customization

HTML Examples

Imports

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

Code

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