Use CSS for tooltip customization

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

1. On the Whatfix Guidance Dashboard, click Style.

   

2. Click Templates.  

3. Click Default.

   

4. Go to the tooltip that you want to copy and customize, and then click the Copy template icon.

   

5. Go to the Customized section to view the copied template.

6. On the copied template, click the Edit template icon.

7. Under CSS, edit the code based on your use case.

8. Once you’ve modified the code, click Run to preview the changes.

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.

9. Click Save.

   

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

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

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

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

stroke-width: 6px;

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

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.

   

2. Go to Tooltip and click Change.

   

3. Select any of the customized Tooltip templates that you have created using the CSS code view.

   

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.

2. Choose any template of your choice from the custom templates that you have created.

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

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

   

2. Select the element where you want Step 5 to be shown.

   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.

4. Once you select the desired template, click CSS to access the code view.

5. Make further edits to the template using the CSS code view.

   

   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.