; return double ?

{single} {single}

: single; };

## Anatomy The Tooltip consists of three primary elements that work together to add quick clarity to an element.

1. Tooltip background, content 2. Caret 3. Trigger ## Options The Tooltip supports the following configurations to accommodate various supplementary information scenarios. ### Content #### Text content

By default, Tooltips support a basic string of text, with only minimal additions that can be added, such as emojis. #### Custom content

Content within the Tooltip can be customized beyond text, but only with non-interactive elements. ### Placement

Tooltip placement adjusts automatically when insufficient space is available. See behaviors for details. ### Visual States Tooltips open when the trigger element is in a hover or focus state. Avoid removing opening on focus, as this prevents keyboard-only users from viewing Tooltips.

A Tooltip appearing on both the hover and focus state of a Button. ## Behavior The Tooltip responds to space constraints with automatic positioning adjustments and overflow handling. ### Overflow handling

Text in a Tooltip will wrap. The max-width of a Tooltip is 272px or 17rem, while the text region is 256px or 16rem. ## Usage Guidelines Use the Tooltip as supplementary information for interactive elements on the page. #### Use Tooltips to describe Button Icons The meaning behind icons is usually not universally understood. Adding a Tooltip can support the understanding of a Button Icon.

**Do** #### Use Tooltips for supplementary information When space is constrained, use Tooltips for supplemental information such as definitions and contextual help. Consider inline text as an alternative in most cases.

**Do** ### When not to use Tooltips are generally difficult to both discover and use on the page, particularly for touch device users. Alternatives to Tooltips should generally be explored. #### Don't use Tooltips for error messaging Avoid using Tooltips for error messaging. Use inline error messages or Field Message components instead.

**Don't** #### Don't use Tooltips for critical information Information essential to the completion of the task should be visible on the page.

**Don't** ### Alternatives #### Tooltip vs Popover Tooltip is the component of choice for tips and other informational overlays. Popovers may be used in place of a Tooltip when actions are needed. | Usage | Tooltip | Popover | | ------------------------------------ | ------------------------------------ | -------------------------------------- | | Can have a link? | Should not have interactive elements | Yes | | Can have other interactive elements? | Should not have interactive elements | Yes | | Open mechanic? | Hover or Focus | Click/Press, option for Hover or Focus | | Can trap user focus? | No | Yes | ### How to Use #### Positioning a Tooltip Tooltips automatically flip and shift to stay in view by default. Consider a defined starting position. * When elements are placed toward a screen edge, position Tooltips to open in the opposite direction. * Position Tooltips to minimize obstruction of important elements. * When the above considerations do not apply, use top position as the default placement.

**Do**

**Don't** #### Always apply a Tooltip to an interactive element For a Tooltip to be accessible by keyboard and screen readers, the element it is tied to must be keyboard accessible. This typically means the element should be some form of button or link. Avoid adding Tooltips to disabled elements. Disabled elements are not keyboard accessible. Add the Tooltip information on the page itself, or provide a dedicated help Button Icon. ```tsx lines theme={null} import { Tooltip, Flex, Button } from "@servicetitan/anvil2"; function App() { return ( Tooltip to explain why this is disabled. ); } export default App; ``` **Don't**

**Do** An example approach to surfacing an explanation in relation to a disabled element. #### Interactive elements within Tooltips Limit interactive elements within Tooltips. If an overlay needs interactive elements, use the [Popover](/docs/web/components/popover/design) instead. For other interactive elements, add this information on the page itself, or provide a dedicated help Button Icon. ```tsx lines theme={null} import { Tooltip, Flex, Button } from "@servicetitan/anvil2"; function App() { return ( Used in the invoice of a bar. ); } export default App; ``` **Do** ```tsx lines theme={null} import { Tooltip, Flex, Button } from "@servicetitan/anvil2"; function App() { return ( Used in the invoice of a bar. ); } export default App; ``` **Don't** ## Content Content within the Tooltip should be brief, clear, and supplementary to the trigger element. ### Keep content 1-2 lines When content extends to 3+ lines, it is strongly encouraged to find another method of conveying the information.

**Do**

**Don't** ### Don't repeat the content of the Tooltip's trigger Avoid repeating the trigger's content in the Tooltip, even in UIs that heavily use Tooltips. Omitting a redundant Tooltip is preferred over consistent Tooltip usage in the UI.

**Don't** ## Keyboard Interaction Users can navigate the Tooltip using standard keyboard controls. | Key | Description | | ------ | --------------------------------------------------- | | Tab | When focusing on the trigger, activates the Tooltip | | Escape | Hides the Tooltip | ### Accessibility Anvil provides accessibility needs out of the box. Annotating labels is the main piece needed in a design. #### Provide Tooltip labels for Icon Buttons Provide a label to describe the action for both screen readers and users who focus on the element, regardless of whether a label is visible on the page. For more guidance on labels and context, see [input field context association best practices](/docs/accessibility/labels-and-ctas#input-field-context-association).