Contextual Help

Adds contextual help nested in the Toggletip to the form label

Slots

Icon Slot

Use the icon slot to customize default icon.

<script setup lang="ts">
import { VContextualHelp, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VContextualHelp>
    This is an example contextual help
    <template #icon><VIcon name="info-solid" /></template>
  </VContextualHelp>
</template>

API Reference

Properties

Property	Type	Default	Description
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`		Preferred placement of the Contextual Help's Toggletip in relation to the button element

Property	Type	Default	Description
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`		Preferred placement of the Contextual Help's Toggletip in relation to the button element

Slots

Name	Description
default	Default slot.
icon	Custom icon slot (optional).

Name	Description
default	Default slot.
icon	Custom icon slot (optional).