---
title: "Tooltips Best Practices"
slug: "tooltips-best-practices-1"
updated: 2026-08-10T07:00:07Z
published: 2026-08-10T07:00:07Z
canonical: "support.whatfix.com/tooltips-best-practices-1"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltips Best Practices

**Use Contrast Colors to make the Tooltip Stand-out**

Use contrasting colors that make the Tooltip noticeable on your website or application. This is to ensure that the Tooltips are not lost on your interface.

For more information on contrast checking, see this [contrast checker website](https://webaim.org/resources/contrastchecker/) that could help you decide. ![Contrast color2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Contrast%20color%282%29.png)

**Author clear and concise content**

Use simple words and sentences while creating Whatfix content. Keep the description in your Tooltip brief and to the point. ![Description simple.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Description%20simple%283%29.png)

**Place images within the Tooltip**

Ensure that the images you insert in your content don't exceed the width of the Tooltip or Pop-up to avoid any distorted images. Exceeding 270 pixels introduces a scroll bar. ![distorted image2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/distorted%20image%282%29.png)

For more information, see [Insert an image in a Flow tooltip](/studio/docs/inserting-an-image-in-a-flow-step).

**Use brief descriptions in Tooltips**

Ensure that your Flows use easy-to-understand and brief descriptions about your user's next action. ![Description simple.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Description%20simple%283%29.png)

**Ensure the Tooltips don't hide any elements on your website or application**

Position the Tooltips so that they don't hide any elements on your page. In certain cases, the Tooltip could inadvertently hide certain important UI, leading to poor user adoption. ![Reposition tooltip2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Reposition%20tooltip%282%29.png)

**Choose an appropriate theme for the Tooltip**

Choose the best available Tooltip theme to ensure the UI of the Tooltip matches your website or application's UI. ![Bestpractices_flow_tooltip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Configure_flow_tooltip.png)

For more information, see [Change the design of the Tooltip](/studio/docs/changing-the-design-of-the-tool-tip).

**Add an End Message**

Add an end message to all the Whatfix content to ensure your users are well informed about the next course of action.

For more information on adding an end message, see [Customize the end message of a Flow](/studio/docs/customizing-the-end-message-of-a-flow). ![Bestpractices_end_message](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Bestpractices_end_message.png)

## Related

- [Flow tooltip flickers or appears at different position](/flow-tooltip-flickers-or-appears-at-different-position.md)
- [Use CSS for tooltip customization](/configure-tooltips-with-css-customization.md)