Toggletip

A Toggletip is a type of Tooltip that is opened when clicking or tapping on the trigger button.

Usage

import { registerToggletip } from '@vonage/vivid-api';

registerToggletip('your-prefix');

<script type="module">
  import { registerToggletip, registerButton, registerIcon } from '@vonage/vivid-api';
  registerToggletip('your-prefix');
  registerButton('your-prefix');
  registerIcon('your-prefix');
</script>

<your-prefix-toggletip placement="right">
  <your-prefix-button slot="anchor" shape="pill" appearance="filled">
    <your-prefix-icon slot="icon" name="help-line"></your-prefix-icon>
  </your-prefix-button>
  I'm a Toggletip
</your-prefix-toggletip>

<script setup lang="ts">
import { VToggletip, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>
<template>
  <VToggletip>
    <template #anchor
      ><VButton appearance="filled" shape="pill"
        ><template #icon><VIcon name="help-line" /></template></VButton
    ></template>
    I'm a toggletip
  </VToggletip>
</template>

Open

The open attribute controls the open state of the Toggletip.

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

<template>
  <VToggletip open>
    <template #anchor>
      <VButton shape="pill" appearance="filled">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
    I'm open by default
  </VToggletip>
</template>

Anchor

It’s best to use the anchor slot to set the anchor, but you can also use the anchor attribute. Either set it to the id of the anchor element or pass the anchor element itself.

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

const secondToggletip = useTemplateRef<InstanceType<typeof VToggletip>>('toggletip2');
const secondButton = useTemplateRef<InstanceType<typeof VButton>>('button2');

onMounted(() => {
if (secondToggletip.value?.element) {
secondToggletip.value.element.anchor = secondButton.value?.element;
}
});

</script>

<template>
  <div class="wrapper">
    <VButton id="button" appearance="filled" shape="pill">
      <template #icon><VIcon name="help-line" /></template>
    </VButton>
    <VToggletip anchor="button" placement="left">My anchor is ID</VToggletip>
    <VButton ref="button2" appearance="filled" shape="pill">
      <template #icon><VIcon name="help-line" /></template>
    </VButton>
    <VToggletip ref="toggletip2">My anchor is an HTMLElement</VToggletip>
  </div>
</template>

<style>
.wrapper {
  display: flex;
  gap: 16px;
}
</style>

<div class="wrapper">
  <vwc-button id="button" appearance="filled" shape="pill">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  <vwc-toggletip anchor="button" placement="left">My anchor is ID</vwc-toggletip>

  <vwc-button id="button2" appearance="filled" shape="pill">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  <vwc-toggletip id="toggletip2">My anchor is an HTMLElement</vwc-toggletip>
</div>

<script>
  document.querySelector('#toggletip2').anchor = document.querySelector('#button2').id;
</script>

<style>
  .wrapper {
    display: flex;
    gap: 16px;
  }
</style>

Slots

Default Slot

Use default slot to add content to the Toggletip.

Anchor Slot

Toggletips need to be anchored to an element. Place the anchor element inside the anchor slot of the Toggletip.

The anchor element must be clickable and in most cases, will be a button displaying an information glyph as in the example below.

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

<template>
  <VToggletip>
    <template #anchor>
      <VButton shape="pill" appearance="filled">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
    I'm a Toggletip
  </VToggletip>
</template>

Action Items Slot

You can add action items elements (Buttons) using the action-items slot. They will be displayed right-aligned at the bottom of the Toggletip.

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

<template>
  <VToggletip open placement="right-start">
    <template #anchor>
      <VButton shape="pill" appearance="filled">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
    This is a Toggletip with action items
    <template #action-items><VButton appearance="outlined" label="Action" shape="pill" /><VButton appearance="filled" label="Action" shape="pill" /></template>
  </VToggletip>
</template>

<vwc-toggletip open placement="right-start">
  <vwc-button slot="anchor" shape="pill" appearance="filled">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  This is a Toggletip with action items
  <vwc-button appearance="outlined" label="Action" shape="pill" slot="action-items"></vwc-button>
  <vwc-button appearance="filled" label="Action" shape="pill" slot="action-items"></vwc-button>
</vwc-toggletip>

CSS Variables

Max Inline Size

The --toggletip-max-inline-size variable sets the toggletip’s max inline size.

Default: 30ch

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

<template>
  <VToggletip class="toggletip" placement="top">
    <template #anchor>
      <VButton shape="pill" appearance="filled">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
    Turn on to receive notifications for important updates and alerts directly to your email or mobile device.
  </VToggletip>
</template>

<style>
.toggletip {
  --toggletip-max-inline-size: 50ch;
}
</style>

<vwc-toggletip class="toggletip" placement="top">
  <vwc-button slot="anchor" shape="pill" appearance="filled">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  Turn on to receive notifications for important updates and alerts directly to your email or mobile device.
</vwc-toggletip>

<style>
  .toggletip {
    --toggletip-max-inline-size: 50ch;
  }
</style>

API Reference

Properties

Property	Type	Description
alternate	`boolean`	Inverted color scheme
anchor	`string \| HTMLElement`	ID or direct reference to the component's anchor element.
headline	`string`	Headline text for the Toggletip
open	`boolean`	Sets the open state of the Toggletip
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Prefered placement of the toggletip in relation to the anchor element

Property	Type	Description
alternate	`boolean`	Inverted color scheme
anchor	`string \| HTMLElement`	ID or direct reference to the component's anchor element.
headline	`string`	Headline text for the Toggletip
open	`boolean`	Sets the open state of the Toggletip
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Prefered placement of the toggletip in relation to the anchor element

Slots

Name	Description
action-items	The content to display in the toggletip action items.
anchor	Used to set the anchor element for the toggletip.
default	The content to display in the toggletip.

Name	Description
action-items	The content to display in the toggletip action items.
anchor	Used to set the anchor element for the toggletip.
default	The content to display in the toggletip.