Skip to main content
4.0.9Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 4.0.9

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.

toptopLefttopRight
rightrightBottomrightTop
leftleftBottomleftTop
bottombottomLeftbottomRight
<triton-tooltip title="tooltip!" placement="top">
<triton-badge>top</triton-badge>
</triton-tooltip>
...

API

Properties

PropertyDescriptionTypeDefault
placementWhere to place the tooltip relative to the object it belongs tobottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight'bottom'
sizeSet the size of the component.This size setting will only affect the tooltip popup itself, not the element that triggers the tooltipbase body large medium small tiny xlarge xxlarge xxxlarge'body'
titleTextual content of the tooltip. If no content is provided, the tooltip will not showstring-

Methods

FunctionDescriptionParamsExtra
hideProgrammatically hide the tooltip() => Promise<void>
showProgrammatically show the tooltip() => Promise<void>

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>