- 24 Feb 2025
- 5 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Use CSS for tooltip customization
- Aktualisiert am 24 Feb 2025
- 5 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Note:
CSS customization for tooltips is a Beta feature. Contact support@whatfix.com 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.
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.
Access the CSS code view of the tooltips
Use the following steps to access the CSS view of the tooltips:
On the Whatfix Guidance Dashboard, click Style.
Click Templates.
Click Default.
Go to the tooltip that you want to copy and customize, and then click the Copy template icon.
Go to the Customized section to view the copied template.
On the copied template, click the Edit template icon.
Under CSS, edit the code based on your use case.
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.
Click Save.
Adjust the width of the tooltip
To change the size of the tooltip, find min-width and max-width under the .wrapper-container class and enter the desired width.
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.
min-width: 150px;
max-width: 300px;
Change the tooltip body background color
To change the background color of the tooltip, find --tip-body-bg-color under the .wrapper-container class and enter a color code.
For example, the following CSS code sets the tooltip background color from dark blue (#19265d) to light orange (#FFA450).
--tip-body-bg-color: #FFA450;
Change the color of the buttons (Next or Back button)
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.
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.
--tip-next-bg-color: #e77f3b;
--tip-next-color: #3451d2;
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.
Adjust the button height and width (Next or Back button); also adjust the padding between the button and arrow
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.
For example, the following CSS code helps you adjust the position of the Next or Back button on your tooltip.
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.
stroke-width: 6px;
Adjust the shadow effect on the tooltip background
To adjust the shadow on the tooltip background, find the .tooltip-widget-with-shadow class and change the box-shadow.
For example, the following code sets the shadow effect from 50px to 200px.
.tooltip-widget-with-shadow {
box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);
}
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.
Go to Style on Whatfix Dashboard and click either Flows, Beacons, or Smart-tips based on which tooltip you want to create.
Go to Tooltip and click Change.
Select any of the customized Tooltip templates that you have created using the CSS code view.
Here’s how to view the CSS customized tooltips on the Dashboard for Flows, Beacons, and Smart-tips:
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:
Go to the default template on Studio and click Change.
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:
Click Add Step to create step 5 (take the example mentioned earlier).
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.
Click Change to select a different desired template for Step 5, to differentiate from the rest of the steps.
Once you select the desired template, click CSS to access the code view.
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.