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:
|
content (optional) | string | The text to be hovered |
Playground
Customization
HTML Examples
Imports
html
<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
html
<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>