Tooltip

Display a portalled tooltip.

Usage

Utilise a default tooltip with the information icon.

Example text 
<template>
  Example text <CTooltip class="ml-2">
    <template #content>
      Tooltip content
    </template>
  </CTooltip>
</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