Top
Change the design of the tool tip
  • 08 Oct 2024
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Change the design of the tool tip

  • Dark
    Light
  • PDF

Article summary

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.

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

  2. Click Flows.
    ia_style_flows

  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.
  • 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.
  • 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.
    Flow_theme.png
  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
  1. Expand Appearance and select a tool tip theme from the available options.
    Change_appearance

    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
Note

All colors and fonts can be customized in each appearance.

  1. Click Save to save the changes.
    Click_save.png
your title goes here

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

Set individual style for each Flow

your title goes here

The appearance of individual Flows can also be customized during Flow creation. For more information, see Create 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

  2. Click Flows.
    ia_left%20nav_flows

  3. Hover your cursor over the required Flow, and then click the Edit icon.
    DB_CLM_Click_Edit.png

  4. Click Customize.
    db_flow_customize

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:
  • Tool Tip: Configure tips, select a color, format font, and text sizes, customize tip shapes and buttons.
  • 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.
  • 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.
    CLMDashboard_individual_flow_themes
  1. Choose a tool tip theme from the available options.
    Dashboard_contheme_tooltheme

    Here's how each theme modifies the tool tip appearance


Note

All colors and fonts can be customized in each theme.

  1. Expand Tip Configuration and configure the following:
  • Color configuration: Select from the existing color picker or pass the hex code of the desired color.
  • Text Configuration: Select font size, color, and style of the tool tip text.
  • Next Button: Select to show or hide the NEXT button, configure the appearance style, customize button, and text color.
    Dashboard_theme_tipconfig
  1. Expand Other Configuration and configure the following:
  • Back Button: Choose to show or hide back button
  • Step Number: Choose to show or hide step number
  • Flow Name: Choose to show or hide Flow name
  • Flow Name Text: Choose font size and color for the Flow name
  • Corner Radius: Add rounded corners for your tips
    Dashboard_theme_otherconfig
  1. Click Save.


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.