Overview
Displays a tooltip when a user hovers over a specific element.Usage
Use of ref and reference
<KTooltip
reference="myButton"
:refs="$refs"
>
Click me to learn more!
</KTooltip>
<button ref="myButton">Learn More</button>
The ref attribute creates a reference to the myButton element, and
the reference prop associates the tooltip with this reference.
Disabled state
<KTooltip
reference="disableButton"
:refs="$refs"
disabled
>
This tooltip is disabled
</KTooltip>
<button ref="disableButton">Learn More</button>
The disabled prop can be used to disable the tooltip.
Supported placements
<KTooltip
reference="topButton"
:refs="$refs"
placement="top"
>
Top placement
</KTooltip>
<button ref="topButton">Top</button>
The placement prop can be used to specify the placement of the tooltip.
Maximum width
<KTooltip
reference="maxWidthButton"
:refs="$refs"
maxWidth="200px"
>
This tooltip has a max width of 200px
</KTooltip>
<button ref="maxWidthButton">Learn More</button>
The maxWidth prop can be used to limit the tooltip width.
Appearance overrides
<KTooltip
reference="appearanceButton"
:refs="$refs"
:appearanceOverrides="{ backgroundColor: 'red' }"
>
This tooltip's background (black by default) has been overridden (red)
</KTooltip>
<button ref="appearanceButton">Learn More</button>
The appearanceOverrides prop can be used to override the appearance of the
tooltip.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
reference | Name of ref element within the parent's $refs object. Tooltip will be
positioned relative to this element. | string | — | true |
refs | Parent's $refs object which should contain the named reference. | object | — | true |
disabled | Whether or not tooltip is disabled | boolean |
false
| — |
placement | Placement of tooltip relative to reference. Supports any popper.js placement string | string |
'bottom'
| — |
text | Text of the tooltip | string |
null
| — |
maxWidth | Maximum width of the tooltip.
Accepted values follow the standard
CSS max-width property format.
If it's not provided, the tooltip's
size fits its content. | string |
null
| — |
appendToOverlay | Whether or not the tooltip should be moved
to the overlay container element #k-overlay | boolean |
false
| — |
appearanceOverrides | If provided, sets the styles of the tooltip | object |
{}
| — |
Slots
| Name | Description |
|---|---|
default | Slot alternative to text prop |