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:

<KTooltip label="Video Games">
  <KButton>🎮</KButton>
</KTooltip>

Props ​

label ​

Here you can pass in the text to display in the tooltip.

<KTooltip label="I am a new sample label">
  <KButton>Sample Button</KButton>
</KTooltip>

When using the label prop (or the content slot), passing a value of undefined, an empty string, or no content slot content will prevent the tooltip from showing, while still displaying your default slot content.

<KTooltip :label="tooltipLabel">
  <KButton>My tooltip label is empty</KButton>
</KTooltip>

<script setup lang="ts">
import { ref } from 'vue'

// The tooltip doesn't have label text yet,
// so hovering over the button will not render an empty tooltip
const tooltipLabel = ref<string>('')
</script>

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

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

default ​

The default slot 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>

content ​

The content slot allows you to slot in any html content

<KTooltip>
  <KButton>&nbsp;✌🏻</KButton>
  <template v-slot:content>
    <span><b>yoyo</b> <em>kooltip</em></span>
  </template>
</KTooltip>

Theming ​

Example:

<template>
  <KTooltip class="tooltip-blue" label="Video Games">
    <KButton class="primary">themed tooltip</KButton>
  </KTooltip>
</template>

<style>
.tooltip-blue {
  --KTooltipBackground: blue;
  --KTooltipColor: lightblue;
}
</style>