Tooltip

A tooltip is an informative message that appears when a user hovers over, focuses on, or taps an element, providing additional context, guidance, or information without cluttering the interface.

Simple tooltip.

<KTooltip text="Simple tooltip.">
  <InfoIcon />
</KTooltip>

Props

text

Text to display in the tooltip.

You will receive a notification once your request is approved.

<KTooltip text="You will receive a notification once your request is approved.">
  <KButton>Request</KButton>
</KTooltip>

When using the text 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 :text="tooltipText">
  <KButton>My tooltip text is empty</KButton>
</KTooltip>

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

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

placement

Where the tooltip should appear - by default it appears on top.

Here are the different options:

• auto
• top
• top-start
• top-end
• left
• left-start
• left-end
• right
• right-start
• right-end
• bottom
• bottom-start
• bottom-end

A tooltip that appears on the bottom.

A tooltip that appears on the top.

A tooltip that appears on the left.

A tooltip that appears on the bottom.

<KTooltip placement="bottom" text="A tooltip that appears on the bottom.">
  <KButton>Sample Button</KButton>
</KTooltip>

maxWidth

You can set the maximum width of the tooltip container with the maxWidth property. maxWidth defaults to auto.

A very long tooltip that wraps to the next line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<KTooltip max-width="300" text="A very long tooltip that wraps to the next line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
  <InfoIcon />
</KTooltip>

tooltipId

A string to be used as id attribute on underlying role="tooltip" element. Useful for setting accessible attributes (such as aria-describedby) on other elements.

Full Name

Please enter your full name as it appears in government documents.

<label aria-describedby="full-name-field-tooltip" for="full-name-field">
  Full Name

  <KTooltip tooltip-id="full-name-field-tooltip" text="Please enter your full name as it appears in government documents.">
    <InfoIcon tabindex="0"/>
  </KTooltip>
</label>
<KInput id="full-name-field" />

Slots

default

The default slot takes in the element you want the popover to be triggered over.

<KTooltip text="A simple tooltip.">
  <KButton>Button</KButton>
</KTooltip>

content

The content slot allows you to slot in any html content

Id: 8576925e-d7e0-4ecd-8f14-15db1765e69a

<KTooltip>
  <InfoIcon />

  <template #content>
    Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
  </template>
</KTooltip>