Use CSS for tooltip customization
- 14 Jan 2025
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Use CSS for tooltip customization
- Updated On 14 Jan 2025
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
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.
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.
Your title goes here
If you click Reset, all the CSS changes are discarded, and the code reverts to its last saved state.
Click Save.
Use cases
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;In addition to that, you can also 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);
}Was this article helpful?