Wrap the trigger element (such as an <IButton>) and provide a <template #body> inside an <ITooltip> component to create a tooltip.
<template>
<ITooltip>
<IButton>Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
</template>
Trigger tooltips at the top, bottom, left or right of elements by using the placement property.
Each position also has a -start or -end variant that sets the tooltip to the start or end of the placement instead of centering it. The possible placements are:
toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
<template>
<ITooltip placement="top">
<IButton>Top Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip placement="bottom">
<IButton>Bottom Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip placement="left">
<IButton>Left Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip placement="right">
<IButton>Right Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
</template>
Tooltips can contain text of virtually any size. You can control the wrapping and the maximum width of the tooltip by setting white-space: normal and a fixed width property on the tooltip content.
<template>
<ITooltip>
<IButton>Normal Tooltip</IButton>
<template #body>
This is a <strong>freeform tooltip</strong> with a <u>long text</u>. Its width is not
controlled.
</template>
</ITooltip>
<ITooltip>
<IButton>Fixed Width Tooltip</IButton>
<template #body>
<div class="_xs:justify-content:center" style="white-space: normal; width: 240px">
This is a <strong>freeform tooltip</strong> with a <u>long text</u>. Its width is
controlled.
</div>
</template>
</ITooltip>
</template>
You can use the trigger property to trigger the tooltip on hover or click. By default, tooltips are triggered on hover, a design decision made to improve user experience.
<script setup>
import { ref } from 'vue';
const visible = ref(false);
</script>
<template>
<ITooltip events="click">
<IButton>Click Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip events="hover">
<IButton>Hover Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip events="focus">
<IButton type="submit">Focus Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip :events="['focus', 'hover']">
<IButton>Multiple Events Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip v-model:visible="visible" events="manual">
<IButton @click="visible = !visible">Manual Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
</template>
You can choose a light or dark color for your tooltip using the color modifier.
<template>
<ITooltip color="light">
<IButton color="light">Light Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip color="dark">
<IButton color="dark">Dark Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
</template>
You're able to use the size property to control the size of your tooltips, using one of the available sizes: sm, md, and lg.
The default size is set to md.
<template>
<ITooltip size="sm">
<IButton>Small Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip size="md">
<IButton>Medium Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
<ITooltip size="lg">
<IButton>Large Tooltip</IButton>
<template #body>Tooltip</template>
</ITooltip>
</template>