ACV Tooltip

Tooltip is a popup that displays additional information related to an element when you hover or focus on an element using the keyboard. It typically appears after small delay and disappears when mouse out. The tooltip is text only. No links, icons or form elements are allowed in the tooltip. Do not confuse tooltip and popover components. Tooltips do not receive focus, and they are not keyboard accessible. Tooltip is called by hover state, and popover is called by clicking.

Figma component mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Tokens-test?node-id=56-4409

Basic usage

Source code

<script setup>
  import { ref } from 'vue';
  import AcvTooltip from '@/components/tooltip/tooltip.vue';
  import AcvButton from '@/components/button/button.vue';

  const visible = ref(false);
</script>

<template>
  <AcvTooltip
    v-model="visible"
  >
    <AcvButton>
      Hover me
    </AcvButton>
    <template #content>
      <div>Tooltip content</div>
    </template>
  </AcvTooltip>
</template>

Placement

TIP

Use attribute content to set the display content when hovered. The attribute placement determines the position of the tooltip. Its value is [orientation]-[alignment] with four orientations top, left, right, bottom and two alignments start, end, and the default alignment is null. Take placement="left-end" for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.

Disabled Button

Tooltip uses mouse events as trigger. Disabled button won't emit these events natively. In order to show a tooltip over a disabled button, we recommend to put the disabled button within a <div> or <span> and use the container as the trigger of tooltip. This applies to Popover as well.

Toggle disabled

Tooltip width

Width is calculated automatically. But, you can define the maximum size of the width by setting max-width property. max-width property can be a number (in pixels) or a keyword such as auto-width. The default value is the default keyword and is approximate 300px

Default

Number

Auto width

Accessibility

Provided AcvTooltip component must adapt to the list of WAI-ARIA accessibility patterns.

Interaction

• on hover over the element to show the tooltip
• on blur or mouse out, the tooltip will hide
• Escape key to hide the tooltip

WAI-ARIA roles

• tooltip has role tooltip
• tooltip trigger has aria-describedby attribute that references the element with the tooltip content

Related components

• Popper
• Popover

Props

Prop name	Description	Type	Values	Default
maxWidth	Defines the behavior for maximum width of tooltip	string | number	'auto', 'none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl', '10xl'	'auto'
size	Size of the tooltip	AcvTooltipSize	tooltipSize	'auto'
content	Content of the tooltip	string	-
trigger		-	-	'hover'
placement		-	-	'top'
arrow		-	-	true
offset		-	-	6

Slots

Name	Description	Bindings
default	Default slot content for anchor
content	Custom content of the tooltip