Top
Tooltips Best Practices
  • 15 Dec 2021
  • 1 Minute To Read
  • Dark
    Light
  • PDF

Tooltips Best Practices

  • Dark
    Light
  • PDF

Use Contrast Colors to make the Tooltip Stand-out

Use contrasting colors that make the Tooltip noticeable on your website/application. This is to ensure that the Tooltips are not lost on your interface.

For more information on contrast checking, see this contrast checker website that could help you decide.
Contrast color

Author clear and concise content

Use simple words and sentences while creating Whatfix content. Keep the description in your Tooltip brief and to the point.
Description simple

Place images within the Tooltip

Ensure that the images you insert in your content don't exceed the width of the tooltip or pop-up to avoid any distorted images. Exceeding 270 pixels introduces a scroll bar.
distorted image

Use brief descriptions in Tooltips

Ensure that your Flows use easy-to-understand and brief descriptions about your user’s next action.
Description simple

Ensure the Tooltips don’t hide any elements on your website/application

Position the Tooltips so that they don't hide any elements on your page. In certain cases, the Tooltip could inadvertently hide certain important UI leading to poor user adoption.
Reposition tooltip

Choose an appropriate theme for the Tooltip

Choose the best available Tooltip theme to ensure the UI of the Tooltip matches your website/application’s UI.
theme_tab_new_UI

Add an End Message

Add an end message to all the Whatfix content to ensure your users are well informed about the next course of action.

For more informationon adding an end message, see Customizing the end message of a Flow.

end_message_new_UI


Was This Article Helpful?

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.