Tooltip
A Tooltip is a small popup that appears when the user hovers an associated UI item. Tooltips are used to inform the user of an action they are about to take, or to provide other contextual information. They are especially useful for buttons with only an icon (and no label), because unfamiliar users might not know what the button does.
Basic Usage
<triton-tooltip title="This is a tooltip">
A tooltip will open when this text is hovered
</triton-tooltip>
<TritonTooltip title="This is a tooltip">
A tooltip will open when this text is hovered
</TritonTooltip>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-tooltip title="This is a tooltip">
A tooltip will open when this text is hovered
</triton-tooltip>
</body>
</html>
A tooltip will open when this text is hovered
Behavior
The TritonTooltip can be used by wrapping a markup element in a <triton-tooltip>.
Use the title property to set the content of the tooltip.
The tooltip also has a slot that can render HTML.
A tooltip will open when this text is hovered
<triton-tooltip title="This is a tooltip">
<h4>A tooltip will open when this text is hovered</h4>
</triton-tooltip>
Placement
There are several options for where to place the tooltip relative to its associated element.
Note that the tooltip will only render in a given direction if there is enough space to render it. If not it will display in the opposite orientation.
Use the placement property to first determine the direction the tooltip will be placed, and then use the postfix to determine the starting point from which it renders.
E.g. topLeft will pop up on the top of the element (if there is room), and render from left to right.
<triton-tooltip title="tooltip!" placement="top">
<triton-badge>top</triton-badge>
</triton-tooltip>
...
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
placement | Where to place the tooltip relative to the object it belongs to | bottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight | 'bottom' |
size | Set the size of the component.This size setting will only affect the tooltip popup itself, not the element that triggers the tooltip | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
title | Textual content of the tooltip. If no content is provided, the tooltip will not show | string | - |
Methods
| Function | Returns | Description | Extra |
|---|---|---|---|
hide() | Promise<void> | Programmatically hide the tooltip | - |
show() | Promise<void> | Programmatically show the tooltip | - |
Slots
Main
takes any kind of markup element
<triton-tooltip>
<div></div>
</triton-tooltip>
tooltip-content
takes any kind of markup, use only when the tooltip content can not be represented with text only
<triton-tooltip>
<div slot="tooltip-content"></div>
</triton-tooltip>