---
title: "Use CSS for tooltip customization"
slug: "configure-tooltips-with-css-customization"
updated: 2025-08-07T14:09:10Z
published: 2025-08-07T14:09:10Z
canonical: "support.whatfix.com/configure-tooltips-with-css-customization"
---

> ## 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.

# Use CSS for tooltip customization

> [!WARNING]
> Note:
> 
> CSS customization for tooltips is a Beta feature. Contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20CSS%20customization%20for%20tooltips&body=Hi%20Team%2C%0A%0ACould%20you%20please%20enable%20CSS%20customization%20for%20tooltips%20for%20the%20following%20ENT%20ID%3A%0A%0AThanks) to enable it.

The CSS customization feature for tooltips enables you to have complete control over the design of tooltips for a better user experience. Use the CSS code view to make detailed visual tweaks that aren’t possible using the UI options. The CSS code view is available for the tooltips of Flows, Smart-tips, and Beacons that you select.

> [!WARNING]
> Note:
> 
> - The CSS code view cannot be deleted.
> - Before you customize a tooltip, as a best practice, create a backup copy of the code to prevent its unexpected loss.
> - For Content and Widgets that are already in the published stage, ensure you perform Push to Production for the CSS changes to reflect.
> - Whatfix enables Account Managers and Content Managers to create CSS customized tooltips. For more information on user roles, see [Whatfix user roles](/studio/docs/whatfix-user-roles).

****Access the CSS code view of the tooltips****

Use the following steps to access the CSS view of the tooltips:

1. On the Whatfix Guidance Dashboard, click **Style**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left nav_style.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
2. Click **Templates**. ![Dashboard_Style-Templates.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style-Templates.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
3. Click **Default**.

![Dashboard_CSS_defaultview.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_defaultview.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
4. Go to the tooltip that you want to copy and customize, and then click the **Copy template** icon. ![Dashboard_Templates-default.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Templates-default.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
5. Go to the **Customized** section to view the copied template. ![Dashboard_Templates-Customized.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Templates-Customized.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
6. On the copied template, click the **Edit template** icon. ![Dashboard_Edit-templates.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Edit-templates.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
7. Under **CSS**, edit the code based on your use case. ![Dashboard_Style_CSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style_CSS.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
8. Once you’ve modified the code, click **Run** to preview the changes. ![Dashboard_CSS_Run.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_Run.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

> [!WARNING]
> Note:
> 
> - If you click **Reset**, all the CSS changes are discarded, and the code reverts to its last saved state.
> - The templates that you create on your account are available for use to all users using the same account.

1. Click **Save**.

![Dashboard_CSS_Save.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_Save.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

****Adjust the width of the tooltip****

![Dashboard_tooltip_width_before and after.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_width_before%20and%20after.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

To change the size of the tooltip, find min-width and max-width under the .wrapper-container class and enter the desired width.

![Dashboard_CSS-tooltip-width.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS-tooltip-width.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

For example, the following CSS code sets the tooltip to a minimum width from 220px to 150px and a maximum width from 345px to 300 px.

```css
min-width: 150px;
max-width: 300px;
```

****Change the tooltip body background color****

![Dashboard_CSS_tooltip_BGcolor.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_tooltip_BGcolor.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

To change the background color of the tooltip, find --tip-body-bg-color under the .wrapper-container class and enter a color code.

![Dashboard_style-CSS-BG.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_style-CSS-BG.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

For example, the following CSS code sets the tooltip background color from dark blue (#19265d) to light orange (#FFA450).

```css
--tip-body-bg-color: #FFA450;
```

****Change the color of the buttons (Next or Back button)****

![Dashboard_tooltip_buttonNGcolor_Before&After.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_buttonNGcolor_Before&After.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

To change the background and text color of the Next button, find --tip-next-bg-color and --tip-next-color under the .wrapper-container class and enter the desired color codes.

![Dashboard_style-CSS-tooltip_buttontext.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_style-CSS-tooltip_buttontext.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

For example, the following CSS codes set the button background color from white (#FFFFFF) to light orange (#e77f3b) and the button text color from dark blue (#19265d) to light blue (#3451d2), respectively.

```css
 --tip-next-bg-color: #e77f3b;
 --tip-next-color: #3451d2;
```

> [!WARNING]
> Note:
> 
> 
> 
> To change the button text and background color for the **Back** button, find --tip-back-bg-color and --tip-back-text-color under the same .wrapper-container class. Replace the default variables with the color codes you want to use on the **Back** button.
> 
> 
> 
> ![Dashboard_tooltip_Backbutton_color.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_Backbutton_color.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

****Adjust the button height and width (Next or Back button); also adjust the padding between the button and arrow****

![Dashbopard_tooltip_button_PaddingWidthheight_Before&After.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashbopard_tooltip_button_PaddingWidthheight_Before&After.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

To adjust the height, width, and padding of the **Next** or **Back** button, find the height, width, and padding-left or padding-right under the .next-button-icon or .back-button-icon class in the CSS code view.

![Dashboard_CSS-tooltip-buttons.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS-tooltip-buttons.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

For example, the following CSS code helps you adjust the position of the **Next** or **Back** button on your tooltip.

```css
height: 30px;
width: 20px;
padding-left: 10px;
```

Additionally, adjust the width of the arrows next to the buttons. Find stroke-width under the .next-button-icon or .back-button-icon class in the code view to make this change.

For example, the following CSS code helps you adjust the stroke width to 6px for either the **Next** or **Back** button.

```css
stroke-width: 6px;
```

****Adjust the shadow effect on the tooltip background****

![Dashboard_tooltip_BGshadow_Before&After.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_tooltip_BGshadow_Before&After.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

To adjust the shadow on the tooltip background, find the .tooltip-widget-with-shadow class and change the box-shadow.

![Dashboard_CSS_tooltips-shadow.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_CSS_tooltips-shadow.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

For example, the following code sets the shadow effect from 50px to 200px.

```css
.tooltip-widget-with-shadow {
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);
}
```

> [!WARNING]
> Note:
> 
> These are just a few examples of tooltip customizations using CSS code view at a global level. Create more number of customized templates based on your use cases.

****Use CSS customized tooltips on Whatfix Dashboard****

Once you have created the required tooltips using CSS customization, they are visible on the Dashboard for you to start using them. All the customized tooltips become the default templates for Flows, Beacons, and Smart-tips. Also, all the templates remain on your Dashboard for your next use.

1. Go to **Style** on Whatfix Dashboard and click either **Flows**, **Beacons**, or **Smart-tips** based on which tooltip you want to create.

![Dashboard_Style_Flows_Smart-tips_Beacons.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Style_Flows_Smart-tips_Beacons.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
2. Go to **Tooltip** and click **Change**.

![Dashboard_FlowTooltip_Change.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_FlowTooltip_Change.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
3. Select any of the customized **Tooltip templates** that you have created using the CSS code view.

![Dashboard_Flow_CSS_customizedtemplates.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Flow_CSS_customizedtemplates.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

Here’s how to view the CSS customized tooltips on the Dashboard for Flows, Beacons, and Smart-tips:

![CSScustomized_tooltips_Dashboardlevel.gif](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSScustomized_tooltips_Dashboardlevel.gif?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

****Use CSS customized tooltips on Whatfix Studio****

Select the CSS customized tooltips on Studio to make any step-level changes to Flows, Beacons, or Smart-tips. For instance, let’s assume you have created 4 steps in a Flow which appear the same; however, you want step 5 to appear different from the remaining steps. Achieve this use-case using CSS customization at a step level on Whatfix Studio.

Here’s how to select a customized template for Step 5:

1. Go to the default template on Studio and click **Change**. ![Csscustomization_stepleveledits_studio.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Csscustomization_stepleveledits_studio.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
2. Choose any template of your choice from the custom templates that you have created. ![CSscustomization_selecttemplates_stepleveledits.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSscustomization_selecttemplates_stepleveledits.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

Here’s how it appears once you have added the customized template to Step 5:

![CSS_customizedtooltips_Studio.gif](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_customizedtooltips_Studio.gif?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)

> [!WARNING]
> Note:
> 
> 
> 
> Any changes that you make at a step level on Whatfix Studio take precedence over the changes made globally using the Whatfix Dashboard. For instance, if you want to modify Step 5 further, open the CSS code view on Studio for that specific step and make your edits. The changes reflect only for that step, and not for the rest.
> 
> 
> 
> Follow these steps to create CSS customized templates at a step level on Studio:
> 
> 
> 
> 1. Click **Add Step** to create step 5 (take the example mentioned earlier).
> 
> ![CSS_Studiolevel_Step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_Studiolevel_Step.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
> 2. Select the element where you want Step 5 to be shown.
> 
> ![CSS_elementselection_steplevel.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS_elementselection_steplevel.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
> 
> The color of the tooltip is the same as that of the tooltips created on the Dashboard.
> 3. Click **Change** to select a different desired template for Step 5, to differentiate from the rest of the steps. ![CSScustomization_steplevel_selecttemplate.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSScustomization_steplevel_selecttemplate.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
> 4. Once you select the desired template, click **CSS** to access the code view. ![CSS customization_steplevel_selectCSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS%20customization_steplevel_selectCSS.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
> 5. Make further edits to the template using the CSS code view.
> 
> ![CSScustomization_steplevel_openCSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSScustomization_steplevel_openCSS.png?sv=2026-02-06&spr=https&st=2026-10-17T06%3A38%3A58Z&se=2026-10-17T07%3A38%3A58Z&sr=c&sp=r&sig=FEhjNC%2Fmr5oeGzySa1K0DdQ6hYVKD7jcbq5UQWiscWA%3D)
> 
> The changes made at the step level do not reflect on the Dashboard (global level) and therefore remain specific and unique to the step that you edit on Studio.

## Related

- [Dashboard](/dashboard.md)
- [Tooltips Best Practices](/tooltips-best-practices.md)