Skip to content

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.

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

Props

text

Text to display in the tooltip.

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

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

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

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

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

content

The content slot allows you to slot in any html content

html
<KTooltip>
  <InfoIcon />

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

Released under the Apache-2.0 License.