Top
    Login
    Contents x
    Use AI powered style editor for tooltip customization
    • 08 Jul 2025
    • 3 Minutes To Read
    • Print
    • Dark
      Light
    • PDF
    Contents

    Use AI powered style editor for tooltip customization

    • Updated On 08 Jul 2025
    • 3 Minutes To Read
    • Print
    • Dark
      Light
    • PDF
    Article summary

    Note:

    AI powered style editor for tooltip creation is a Beta feature. If you need to enable the feature, you must first enable the CSS customization (also Beta) feature for tooltips. Contact support@whatfix.com to enable both the features for your account. For more information on how to use CSS for tooltips, see Use CSS for tooltip customization.

    Info:

    • The CSS code view cannot be deleted. The AI style editor cannot be deleted either.

    • While using the AI powered style editor, you have the option to switch to the CSS code editor while creating tooltips.

    • For Content and Widgets that are already in the published stage, ensure you perform Push to Production for the changes to reflect.

    • Whatfix enables Account Managers and Content Managers to create customized AI powered tooltips. For more information on user roles, see Whatfix user roles.

    AI powered style editor enables creation of brand-compliant tooltips in a much simpler way. Instead of spending more time in the CSS code editor, generate the required tooltip design through prompts. The AI powered feature gives better control over refining design consistency and the output that is required.

    The feature can be accessed on both Whatfix Studio and Dashboard. It is available for Flows, Smart tips, and Beacons.

    Use the AI style editor for tooltip customization on Whatfix Dashboard

    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. Click CSS to open the AI style editor.

    Here’s the Dashboard view of the AI powered style editor:

    1. Enter prompts based on your use cases and click Submit for the changes to reflect.

      For instance, if you want the Flow tooltip background color to change from dark blue to green, enter a prompt - Please change the tooltip background color to green. The prompt shown is just for representation, and it would change based on your use cases and requirements.

    1. Click Save.

    Note:

    Examples of other tooltip customizations done with the help of the AI style editor:

    • Change the tooltip width.

    • Change the background color of the buttons.

    • Increase or decrease the shadow effect on the tooltip.

    • Contact support@whatfix.com for help with tooltip customizations on the Dashboard using the AI style editor.

    • The AI style editor enables tooltip customization for Flows, Smart tips, and Beacons.

    Use the AI style editor for tooltip customization on Whatfix Studio

    1. Go to the default template on Studio and click Change.

    2. Choose a template of your choice from the custom templates that you have created on the Dashboard.

    3. Click CSS to open the AI style editor.

    Here’s the Studio view of the AI powered style editor:

    1. Enter the prompts based on your use case and click Submit for the changes to reflect.

      For instance, if you want to add a border around the Next button, enter a prompt - Add a border around the Next button. Or, if you want the tooltip background color to change from red to blue, enter a prompt - Make the tooltip background color blue. The prompts shown are just for representation, and these prompts would change based on your use cases and requirements.

    1. Click Save Step.

    Note:

    The tooltip customizations on Studio do not reflect on the Dashboard, and therefore remain specific and unique to the step that you edit on Studio.

    Examples of other tooltip customizations done with the help of the AI style editor:

    •  Change the tooltip width.

    •  Change the background color of the buttons.

    •  Increase or decrease the shadow effect on the tooltip.

    •  Contact support@whatfix.com for help with tooltip customizations on the Studio using the AI style editor.

    Example use cases for tooltip customization

    Some of the other use cases that you can try out using the AI style editor on both Dashboard and Studio:

    • Change the stroke width of arrows next to the buttons (specify the width).

    • Change the text color in the tooltip (specify the color).

    • Add a border around the buttons.

    • Add a background color to the buttons (specify the color).

    • Remove any of the buttons in the tooltip.

    Was this article helpful?
    What's Next
    Privacy Policy | Whatfix Glossary | Whatfix Platform Status
    Copyright © 2025 WHATFIX TM. All rights reserved.
    Change password!
    Changing your password will log you out immediately. Use the new password to log back in.
    Change profile
    Success!
    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.
    Logout