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 at the bottom.

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 none.

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" />

zIndex

Pass a number to use for the z-index property. Default value is 9999.

kpopAttributes

Use the kpopAttributes prop to configure the underlying KPop's props.

Tooltip offset by 50px.

<KTooltip
  :kpop-attributes="{ offset: '50px' }"
  placement="right"
  text="Tooltip offset by 50px."
>
  <InfoIcon />
</KTooltip>

disabled

Pass true to disable the tooltip. Default value is false.

<KTooltip disabled text="Disabled tooltip content.">
  <KButton>Disabled tooltip button</KButton>
</KTooltip>

Slots

default

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

NOTE

Make sure to set appropriate tabindex attribute on your tooltip trigger element in order to make popover accessible for assistive technology users.

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