KongponentsToolTip
KTooltip is a tooltip component that is used when you need a simple label to be displayed when hovering over an element. KTooltip has a single slot that takes in the element that you want the tooltip to trigger over. At least the label prop must be passed in for the tooltip to display anything. For example a button:
<KTooltip label="Video Games">
<KButton>🎮</KButton>
</KTooltip>Props
label
Here you can pass in the text to display in the toolip.
I am a new sample label
<KTooltip label="I am a new sample label">
<KButton>Sample Button</KButton>
</KTooltip>NOTE
KTooltip won't be triggered if the element you pass through default slot has disabled attribute. You can get around that by wrapping your disabled element around an additional tag, like shown in the example below.
<KTooltip label="I won't show up">
<KButton disabled>❌</KButton>
</KTooltip>
<KTooltip label="I will pop up">
<span>
<KButton disabled>✅</KButton>
</span>
</KTooltip>placement
This is where the tooltip will appear - by default it appears on top.
Here are the different options:
autotoptopStarttopEndleftleftStartleftEndrightrightStartrightEndbottombottomStartbottomEnd
<KTooltip placement="bottom" label="A label that appears on the bottom">
<KButton>Sample Button</KButton>
</KTooltip>positionFixed
Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to false. See KPop docs for more information.
maxWidth
You can set the maximum width of a Tooltip with the maxWidth property. maxWidth defaults to auto.
<KTooltip placement="bottom" max-width="300" label="A label that appears on the bottom. A label that appears on the bottom">
<KButton>button</KButton>
</KTooltip>Slots
DefaultThere is a main slot that takes in the element you want the popover to be triggered over.
<KTooltip label="a cool label">
<!-- Your element goes here -->
<KButton>button</KButton>
</KTooltip>ContentThis allows you to slot in any html content
<KTooltip>
<KButton> ✌🏻</KButton>
<template v-slot:content>
<span><b>yoyo</b> <span class="color-red-500">kooltip</span></span>
</template>
</KTooltip>Theming
| Variable | Purpose |
|---|---|
--KTooltipBackground | Background color |
--KTooltipColor | Color of text |
Example:
<template>
<KTooltip class="tooltip-blue" label="Video Games">
<KButton class="primary">themed tooltip</KButton>
</KTooltip>
</template>
<style>
.tooltip-blue {
--KTooltipBackground: var(--blue-300);
--KTooltipColor: var(--blue-500);
}
</style>