Tooltip

<script setup lang="ts">
import { VTooltip, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>
<template>
  <VTooltip text="I'm a tooltip" placement="right">
    <template #anchor>
      <VButton appearance="filled" shape="pill" aria-label="More information"
        ><template #icon><VIcon name="help-line" /></template
      ></VButton>
    </template>
  </VTooltip>
</template>

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

<your-prefix-tooltip text="I'm a tooltip" placement="right">
  <your-prefix-button slot="anchor" shape="pill" appearance="filled" aria-label="More information">
    <your-prefix-icon slot="icon" name="help-line"></your-prefix-icon>
  </your-prefix-button>
</your-prefix-tooltip>

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

const secondTooltip = useTemplateRef<InstanceType<typeof VTooltip>>('tooltip2');
const secondButton = useTemplateRef<InstanceType<typeof VButton>>('button2');

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

</script>

<template>
  <div class="wrapper">
    <VButton id="button" appearance="filled" shape="pill" aria-label="More information">
      <template #icon><VIcon name="help-line" /></template>
    </VButton>
    <VTooltip anchor="button" placement="left" text="My anchor is ID" />
    <VButton ref="button2" appearance="filled" shape="pill" aria-label="More information">
      <template #icon><VIcon name="help-line" /></template>
    </VButton>
    <VTooltip ref="tooltip2" placement="right" text="My anchor is an HTMLElement" />
  </div>
</template>

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

<div class="wrapper">
  <vwc-button id="button" appearance="filled" shape="pill" aria-label="More information">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  <vwc-tooltip anchor="button" placement="left" text="My anchor is ID"></vwc-tooltip>
  <vwc-button id="button2" appearance="filled" shape="pill" aria-label="More information">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
  <vwc-tooltip id="tooltip2" placement="right" text="My anchor is an HTMLElement"></vwc-tooltip>
</div>

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

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

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

<template>
  <VTooltip text="I'm a tooltip">
    <template #anchor>
      <VButton shape="pill" appearance="filled" aria-label="More information">
        <template #icon><VIcon name="help-line" /></template>
      </VButton>
    </template>
  </VTooltip>
</template>

<vwc-tooltip text="I'm a tooltip">
  <vwc-button slot="anchor" shape="pill" appearance="filled" aria-label="More information">
    <vwc-icon slot="icon" name="help-line"></vwc-icon>
  </vwc-button>
</vwc-tooltip>

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

<template>
  <VTooltip text="Turn on to receive notifications for important updates and alerts directly to your email or mobile device." class="tooltip">
    <template #anchor>
      <VButton shape="pill" appearance="filled" aria-label="More information">
        <template #icon><VIcon name="info-line" /></template>
      </VButton>
    </template>
  </VTooltip>
</template>

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

<vwc-tooltip text="Turn on to receive notifications for important updates and alerts directly to your email or mobile device." class="tooltip">
  <vwc-button slot="anchor" shape="pill" appearance="filled" aria-label="More information">
    <vwc-icon slot="icon" name="info-line"></vwc-icon>
  </vwc-button>
</vwc-tooltip>

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