Tooltip - Frameworks

A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Vue

AndroidElementsiOSReactVue

Import

Use in entire app

import { Attention } from '@warp-ds/vue';
app.use(Attention);

Use in one component and special imports

You can import the component like so:

import { wAttention } from '@warp-ds/vue';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { wAttention } from '@warp-ds/vue/attention';

Visual option

<script setup>
import { ref } from 'vue';
import { wAttention, wButton } from '#components';

const target = ref(null);
const showing = ref(false);
</script>
<template>
  <w-button
    utility
    ref="target"
    aria-describedby="tooltip-bubbletext"
    :aria-expanded="showing"
    @mouseenter="
      showing = true
      target = $refs.target
    "
    @mouseleave="showing = false"
    @keydown.escape="showing = false"
    @focus="showing = true"
    @blur="showing = false"
  >
    Hover over me
  </w-button>
  <w-attention
    tooltip
    placement="right"
    :target-el="target?.$el"
    v-model="showing"
  >
    <p id="tooltip-bubbletext">Hello Warp!</p>
  </w-attention>
</template>

Flip prop

The attention component uses the Floating-ui library to calculate its position. By default, the flip prop is set to false, which means that the attention component will not flip its position to the opposite side.

Try to scroll up and down and see how the attention component doesn't move:

When flip is set to true, it will instead trigger Floating-ui's flip() function that will make sure that the attention component stays in viewport, by flipping it to the opposite side.

Try to scroll up and down and see how the attention component moves its position to the opposite side to keep itself in viewport as long as possible:

Cross-axis prop

The cross-axis prop decides whether to check for cross axis overflow or not when flip is set to true. By default, the cross-axis prop is set to false, which means that the attention component will ignore cross axis overflow.

Read more: Floating-ui crossAxis

Fallback-placements prop

By default, fallback-placements is undefined. If flipis set to true, then you have the option to also use fallback-placements prop and pass in an array of preferred placements that you want the attention component to try if there is no longer any space left to position it to the initial placement, e.g. ['right', 'top'].

Read more: Floating-ui fallbackPlacements

Try to scroll up and down and see how the attention component's position starts at the bottom but then moves to the right but then moves to the top:

Accessibility

The attention component handles accessibility automatically by wrapping its slotted content with a div that has a default role attribute set to tooltip when the tooltip prop is activated, and a default localized aria-label.

It is possible to remove the default role and override the aria-label attribute:

<w-attention
  tooltip
  placement='bottom'
  v-model='tooltipShowing'
  role=''
  aria-label=''
>
  <p id='tooltip-bubbletext' role='tooltip'>
    I'm a tooltip speech bubble with overridden role and aria-label attributes pointing up.
  </p>
</w-attention>

If the user chooses to remove the role and/or override the aria-label attributes then it is important to also add aria-details on the target element.

Read more: MDN aria-details

Props

Required props

Name	Type	Default	Description
v-model	boolean		Whether Attention component should be visible
target-el	string		Selector of element that the Attention component is rendered relatively to.

Optional Props

Name	Type	Default	Description
placement	'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end'	'bottom'	Placement according to the target element. The arrow will point to the opposite side of this position.
tooltip	boolean	false	Whether Attention component is rendered as a tooltip
role	string	tooltip	Allows the user to remove the default ARIA role attribute for the Attention component, by supplying an empty role (role=""). Default role is set to tooltip.
aria-label	string		Allows the user to override the default aria-label attribute for the Attention component
no-arrow	boolean	false	Render Attention component without arrow
distance	number	8	Distance from which to offset the Attention component from the targetEl vertically
skidding	number	0	Distance from which to offset the Attention component along its targetEl horizontally
flip	boolean	false	Whether Attention element should flip its placement in order to keep it in view
cross-axis	boolean	false	Whether Attention element should ignore cross axis overflow when flip is enabled. Can only be used when flip is set to true.
fallback-placements	array	undefined	Choose which preferred placements the Attention element should flip to. Can only be used when flip is set to true.

Events

Name	Description
@dismiss	Triggered when user clicks the close button or presses Escape when the button is in focus.