Usage
Utilise a default tooltip with the information icon.
Example text with a load of extra content that wraps onto a load of extra lines and such
<template>
<p class="max-w-100">
Example text <CTooltip>
<template #content>
Tooltip content
</template>
</CTooltip> with a load of extra content that wraps onto a load of extra lines and such
</p>
</template>
Size
Use the size prop to adjust the size of the tooltip.
Hover me!
<template>
<CTooltip size="sm">
<template #content>
Example tooltip
</template>
</CTooltip>
</template>
Disabled
Use the is-disabled boolean prop to prevent tooltip activation.
Hover me!
<template>
<CTooltip disabled>
<template #content>
Example tooltip
</template>
</CTooltip>
</template>
Float
Use the offset prop to customise the props passed to the Float wrapper.
Hover me!
<template>
<CTooltip :float="{ placement: 'right', offset: 20, arrow: false }" size="sm">
<template #content>
Example tooltip
</template>
</CTooltip>
</template>
Slots
activator
Use the #activator slot to render a different trigger.
<template>
<CTooltip>
<CButton>
Hover me!
</CButton>
<template #content>
Tooltip content
</template>
</CTooltip>
</template>
Props
size
"md" | "sm"
"md"float
FloatProps
content
string
disabled
boolean
useShow
boolean