Tooltip
Tooltips are small floating labels that appear when hovering over an element. They provide additional context or information without cluttering the interface. The tooltip directive supports automatic positioning, delays, and auto-close functionality.
Basic tooltip
Use the v-tooltip directive with a string value to create a simple tooltip that appears on hover.
<template>
<div style="display: flex; gap: 16px; align-items: center; padding: 40px;">
<IkButton v-tooltip="'This is a tooltip'">Hover me</IkButton>
<span v-tooltip="'Tooltip on a span element'" style="padding: 8px; border: 1px solid var(--ik-border-color); border-radius: 4px; cursor: help;">
Hover over me
</span>
</div>
</template>
<script setup>
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { vTooltip } from '@ikol/ui-kit/directives/tooltip';
</script>Placement
Control tooltip placement using modifiers: top, right, bottom, left, or auto (default). The auto placement automatically positions the tooltip based on available space.
<template>
<div style="display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 40px;">
<IkButton v-tooltip.top="'Top tooltip'" size="sm">Top</IkButton>
<div style="display: flex; gap: 16px;">
<IkButton v-tooltip.left="'Left tooltip'" size="sm">Left</IkButton>
<IkButton v-tooltip.right="'Right tooltip'" size="sm">Right</IkButton>
</div>
<IkButton v-tooltip.bottom="'Bottom tooltip'" size="sm">Bottom</IkButton>
<IkButton v-tooltip.auto="'Auto placement'" size="sm">Auto</IkButton>
</div>
</template>
<script setup>
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { vTooltip } from '@ikol/ui-kit/directives/tooltip';
</script>Delay
Use the delay modifier to add a 200ms delay before the tooltip appears, or specify a custom delay using an object.
<template>
<div style="display: flex; gap: 16px; align-items: center; padding: 40px;">
<IkButton v-tooltip="'No delay (default)'" size="sm">Immediate</IkButton>
<IkButton v-tooltip.delay="'200ms delay'" size="sm">With Delay</IkButton>
<IkButton v-tooltip="{ text: 'Custom 500ms delay', delay: 500 }" size="sm">Custom Delay</IkButton>
</div>
</template>
<script setup>
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { vTooltip } from '@ikol/ui-kit/directives/tooltip';
</script>Auto-close
Use the close modifier to automatically close the tooltip when the element is clicked (mousedown event).
<template>
<div style="display: flex; gap: 16px; align-items: center; padding: 40px;">
<IkButton v-tooltip="'Normal tooltip'" size="sm">Normal</IkButton>
<IkButton v-tooltip.close="'Closes on click'" size="sm">Auto-close</IkButton>
</div>
</template>
<script setup>
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { vTooltip } from '@ikol/ui-kit/directives/tooltip';
</script>Object configuration
Use an object to configure multiple options at once, including custom placement, delay, and autoclose settings.
<template>
<div style="display: flex; gap: 16px; align-items: center; padding: 40px;">
<IkButton
v-tooltip="{
text: 'Custom configured tooltip',
placement: 'top',
delay: 300,
autoclose: true
}"
size="sm">
Custom Config
</IkButton>
</div>
</template>
<script setup>
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { vTooltip } from '@ikol/ui-kit/directives/tooltip';
</script>Combining modifiers
You can combine multiple modifiers together. Placement modifiers take precedence over the auto default.
<template>
<div style="display: flex; gap: 16px; align-items: center; padding: 40px;">
<IkButton v-tooltip.top.delay="'Top with delay'" size="sm">Top + Delay</IkButton>
<IkButton v-tooltip.bottom.close="'Bottom with auto-close'" size="sm">Bottom + Close</IkButton>
<IkButton v-tooltip.right.delay.close="'Right with delay and close'" size="sm">Right + Both</IkButton>
</div>
</template>
<script setup>
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { vTooltip } from '@ikol/ui-kit/directives/tooltip';
</script>