--- title: "Change the design of the tool tip" slug: "changing-the-design-of-the-tool-tip" tags: ["change color", "configure tool tip"] updated: 2026-03-03T14:10:45Z published: 2026-03-03T14:10:45Z --- > ## 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. # Change the design of the tool tip Whatfix provides various customization options that enable you to change the look and feel of your Flows' tooltips according to your preferences. **Note:** Only an **Account Manager** can perform the following task. For more information about available roles, see [Whatfix User Roles](/studio/docs/whatfix-user-roles). Customize the design of your Flows' tooltips by setting the following: - A default style for all Flows - Individual style for each Flow Set a default style for all Flows Info: When you set a default style, all Whatfix Flow tooltips get created with the same style. Use the following steps to set a default style for your account: 1. On the Whatfix Guidance dashboard, click **Style**. ![ia_left%20nav_style](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_style.png) 2. Click **Flows**. ![ia_style_flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_style_flows.png) 1. The **Flow** Style section has the following customizations that can be enabled across all Whatfix Flows: - **Tool Tip**: Configure tip appearance, select a color, format font, and text sizes, customize tip shapes and buttons. You have the option to select either **Attached to element** or **Free-floating** Flow step type on the Dashboard. For more information, see [Create Flow](/studio/docs/creating-a-flow). ![Choose the Flow step type under Style on Dashboard ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style_Flows_Tooltip.png) - **End Message**: Enable or disable the end message. Select colors, font sizes, and more for your end message text for all Flows. For more information, see [Customize the end message of a Flow](/studio/docs/customizing-the-end-message-of-a-flow). - **PDF**: Choose the PDF format of the Flow multiformat output. You also have the option to select the appearance of the PDF output. ![PDF output of Flows can be configured at the dashboard level ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flows_PDF_Appearance.png) - **Automation**: Enable or disable the Flow Automation Pop-up, show or hide information regarding when the user's input is required, and configure the background opacity. For more information, see [Configure the Flow Automation pop-up](/studio/docs/configuring-the-flow-automation-pop-up). 1. Expand **Interaction** and configure the following: - **Back Button**: Enable or disable the back button toggle. - **Step Number**: Enable or disable the step number toggle. - **Flow Name**: Enable or disable the flow name toggle. - **Next**: Enable or disbale the next button toggle. - **'Next' button icon**: Enable or disable the next button icon toggle. ![Flow_interaction](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Interaction_Flow.png) 1. Expand **Appearance** and select a tool tip theme from the available options. ![Change_appearance](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Change_appearance.png) Configure the following: - **Color**: Select a tip color from the existing color picker or enter the hex code of the desired color. - **Close (X) color**: Select a color for the **X** icon from the existing color picker or enter the hex code of the desired color. - **Corner Radius**: Add rounded corners for your tips. - **Title**: Select font size, color, and style of the Tool Tip Title. - **Description**: Select font size, color, and style of the Tool Tip text. - **NEXT Button**: Configure the button color, text color, hover button color, and hover 'Next' color. - **Flow Name Text**: Select the Flow Name text style, font size, and color. ![Flow_appearance.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Flow_appearance.png) Note: All colors and fonts can be customized in each appearance. 1. Click **Save** to save the changes. ![Click_save.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_save%281%29.png) Note: If you click **Discard changes**, all the modifications you've made to the content will be lost, and the page will revert to its previous saved state. ![Click_Discard](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Discard.png) Set individual style for each Flow Note: The appearance of individual Flows can also be customized during Flow creation. For more information, see [Create a Flow](/studio/docs/creating-a-flow). Use the following steps to set individual style for each Flow: 1. On the Whatfix Guidance dashboard, click **Content**. ![ia_left_nav_content](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_content.png) 2. Click **Flows**. ![ia_left%20nav_flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_flows.png) 3. Hover your cursor over the required Flow, and then click the **Edit** icon. ![image.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-QSOJQNUO.png) 4. Click **Customize**. ![db_flow_customize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/db_flow_customize.png) Info Whatfix Content and Widgets can be edited in the **Draft** and **Ready** Stages. 1. The Flow Theme section has the following customizations that you can enable for a Flow: - **End Message**: Enable or disable the end message. Select colors, font sizes and more for your end message text for all Flows. For more information, see [Request feedback at the end of a Flow](/studio/docs/customizing-the-end-message-of-a-flow). - **Automation**: Enable or disable the flow automation pop-up, show or hide information regarding when the user's input is required, and configure the background opacity. For more information, see [Configure the Flow Automation pop-up](/studio/docs/configuring-the-flow-automation-pop-up). Note: - All colors and fonts can be customized in each theme. - You also have the option to customize the tooltips of Flows, Smart-tips, and Beacons using [CSS code editor](/studio/docs/configure-tooltips-with-css-customization) and [AI style editor](/studio/docs/use-ai-functionality-for-css-customization-of-tooltips). 1. Once you have configured the Flow End Message and Automation, click **Save**. ## Related - [Flows Best Practices](/flows-best-practices.md)