Tooltip ​

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.

Usage ​

<script lang="ts" setup>
import { Button, Tooltip } from '@returnless/focus-ui';
</script>

<template>
  <Tooltip content="Tooltip contents">
    <Button>Trigger button for tooltip</Button>
  </Tooltip>
</template>

Best practices ​

Tooltips should:

• Provide useful, additional information or clarification.
• Succinctly describe or expand on the element they point to.
• Be provided for icon-only buttons or a button with an associated keyboard shortcut.
• Not be used to communicate critical information, including errors in forms or other interaction feedback.
• Not contain any links or buttons.
• Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in experience.

Content guidelines ​

Tooltips should:

• Be written in sentence case.
• Be concise and scannable.
• Not be used to communicate error messages or important account information.