Skip to content
On this page

ToolTip

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:

html
<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
html
<KTooltip label="I am a new sample label">
  <KButton>Sample Button</KButton>
</KTooltip>

placement

This is where the tooltip will appear - by default it appears on top.

Here are the different options:

  • auto
  • top
  • topStart
  • topEnd
  • left
  • leftStart
  • leftEnd
  • right
  • rightStart
  • rightEnd
  • bottom
  • bottomStart
  • bottomEnd
html
<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.

html
<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

  • Default There is a main slot that takes in the element you want the popover to be triggered over.
html
<KTooltip label="a cool label">
  <!-- Your element goes here -->
  <KButton>button</KButton>
</KTooltip>
  • Content This allows you to slot in any html content
html
<KTooltip>
  <KButton>&nbsp;✌🏻</KButton>
  <template v-slot:content>
    <span><b>yoyo</b> <span class="color-red-500">kooltip</span></span>
  </template>
</KTooltip>

Theming

VariablePurpose
--KTooltipBackgroundBackground color
--KTooltipColorColor of text

Example:

html
<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>

Released under the Apache-2.0 License.