Tooltip
Use the KTooltip component to display informative text when hovering over an element.
Placements
TypeScript
KGrid(justify="center" align="center" gap="16") KTooltip(text="Top Tooltip" position="top") KButton(type="primary") Top KTooltip(text="Bottom Tooltip" position="bottom") KButton(type="primary") Bottom KTooltip(text="Left Tooltip" position="left") KButton(type="primary") Left KTooltip(text="Right Tooltip" position="right") KButton(type="primary") Right
Custom Content
TypeScript
KTooltip(position="top") template(#content) div(style="display: flex; align-items: center; gap: 6px;") KIcon(iconname="file" style="color: #60a5fa;") span Document ready for download KButton Hover for Rich Content
Attributes
Configure the KTooltip component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| text | String | '' | The text contents to display inside the tooltip box. |
| position | String | 'top' | The placement of the tooltip relative to the target element. Options: 'top', 'bottom', 'left', 'right'. |
| disabled | Boolean | false | Setting this to true disables the tooltip from opening. |
Slots
Customise the KTooltip layout using slots.
| Name | Description |
|---|---|
| default | The trigger element that receives the hover listeners. |
| content | Optional. Rich content to display inside the tooltip instead of the plain text attribute. |