Toggletip

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

Toggletip works differently to Tooltip in that it requires a click to display and is keyboard accessible. This means it can display user actions such as links and buttons. The Toggletip’s contents are provided using the headline attribute (below) the default slot or the action-items slot.

Headline

The headline attributes sets the Toggletip headline.

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

<template>
  <VToggletip headline="This is the headline" open>
    <template #anchor>
      <VButton shape="pill" appearance="filled">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
    This is the content
  </VToggletip>
</template>

<vwc-toggletip headline="This is the headline" open>
  <vwc-button slot="anchor" shape="pill" appearance="filled">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  This is the content
</vwc-toggletip>

Placement

The placement attribute sets the default placement of the Toggletip around its anchor element.

The Tooggletip will attempt to position itself where the placement attribute dictates (or the default of bottom if not set). If it is unable to do so, because of lack of available space on the screen, it will reposition itself to the most appropriate alternative placement.

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

<template>
  <div class="grid">
    <VToggletip placement="top-start" class="grid-col-2">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      top-start
    </VToggletip>
    <VToggletip placement="top">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      top
    </VToggletip>
    <VToggletip placement="top-end">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      top-end
    </VToggletip>
    <VToggletip placement="left-start" class="grid-col-1">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      left-start
    </VToggletip>
    <VToggletip placement="right-start" class="grid-col-5">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      right-start
    </VToggletip>
    <VToggletip placement="left" class="grid-col-1">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      left
    </VToggletip>
    <VToggletip placement="right" class="grid-col-5">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      right
    </VToggletip>
    <VToggletip placement="left-end" class="grid-col-1">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      left-end
    </VToggletip>
    <VToggletip placement="right-end" class="grid-col-5">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      right-end
    </VToggletip>
    <VToggletip placement="bottom-start" class="grid-col-2">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      bottom-start
    </VToggletip>
    <VToggletip placement="bottom" open>
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      bottom
    </VToggletip>
    <VToggletip placement="bottom-end">
      <template #anchor>
        <VButton shape="pill" appearance="filled">
          <template #icon><VIcon name="help-line" /></template>
        </VButton>
      </template>
      bottom-end
    </VToggletip>
  </div>
</template>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: repeat(5, 40px);
  gap: 4px;
}
.grid-col-1 {
  grid-column: 1;
}
.grid-col-2 {
  grid-column: 2;
}
.grid-col-5 {
  grid-column: 5;
}
</style>

<div class="grid">
  <vwc-toggletip placement="top-start" class="grid-col-2">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    top-start
  </vwc-toggletip>
  <vwc-toggletip placement="top">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    top
  </vwc-toggletip>
  <vwc-toggletip placement="top-end">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    top-end
  </vwc-toggletip>
  <vwc-toggletip placement="left-start" class="grid-col-1">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    left-start
  </vwc-toggletip>
  <vwc-toggletip placement="right-start" class="grid-col-5">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    right-start
  </vwc-toggletip>
  <vwc-toggletip placement="left" class="grid-col-1">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    left
  </vwc-toggletip>
  <vwc-toggletip placement="right" class="grid-col-5">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    right
  </vwc-toggletip>
  <vwc-toggletip placement="left-end" class="grid-col-1">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    left-end
  </vwc-toggletip>
  <vwc-toggletip placement="right-end" class="grid-col-5">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    right-end
  </vwc-toggletip>
  <vwc-toggletip placement="bottom-start" class="grid-col-2">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    bottom-start
  </vwc-toggletip>
  <vwc-toggletip placement="bottom" open>
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    bottom
  </vwc-toggletip>
  <vwc-toggletip placement="bottom-end">
    <vwc-button slot="anchor" shape="pill" appearance="filled">
      <vwc-icon slot="icon" name="help-line"></vwc-icon>
    </vwc-button>
    bottom-end
  </vwc-toggletip>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(5, 40px);
    gap: 4px;
  }
  .grid-col-1 {
    grid-column: 1;
  }
  .grid-col-2 {
    grid-column: 2;
  }
  .grid-col-5 {
    grid-column: 5;
  }
</style>

Alternate

The alternate attribute changes the Toggletip’s color scheme to the opposite of the currently select one (eg. from light to dark).

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

<template>
  <VToggletip alternate open>
    <template #anchor>
      <VButton shape="pill" appearance="filled">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
    An alternate toggletip
  </VToggletip>
</template>

<vwc-toggletip alternate open>
  <vwc-button slot="anchor" shape="pill" appearance="filled">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  An alternate toggletip
</vwc-toggletip>