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.
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.
<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 | defaultOptions.baseSize |
title | Textual content of the tooltip. If no content is provided, the tooltip will not show | string | - |
Slots
Main
takes any kind of markup element
<triton-tooltip>
<div></div>
</triton-tooltip>