---
title: "Smart Tips Best Practices"
slug: "smart-tips-best-practices"
updated: 2025-01-31T04:23:54Z
published: 2025-01-31T04:23:54Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Tips Best Practices

<div class="accordion">
    <div class="accordion-toggle"> A Smart Tip must always be a part of a Smart Tip collection</div>
    <div class="accordion-content">
     <p>

A Smart Tip, once created, must always be a part of a Smart Tip collection to get displayed on the page or application. For more information, see [Add a Smart Tip to an existing Smart Tip collection](/studio/docs/add-a-smart-tip-to-an-existing-smart-tip-collection){target=`_blank`}. 

</p></div></div>

<div class="accordion">
    <div class="accordion-toggle"> Create one Smart Tip collection per page</div>
    <div class="accordion-content">
     <p>
Whatfix displays only one Smart Tip collection per page at a time. To show multiple Smart Tips on the same page, create them as a single collection. 

</p></div></div>

<div class="accordion">
  <div class="accordion-toggle"> Add Display Rules to Individual Smart Tips </div>
  <div class="accordion-content">
  <p>
      
Add Display Rules to each Smart Tip within a collection to ensure they appear correctly on your page or application. For more information on Display Rules, see [Display Rules for Showing Smart Tips](/studio/docs/display-rules-for-showing-smart-tips){target=`_blank`}.
      
  </p></div></div>

<div class="accordion">
    <div class="accordion-toggle">Position Tooltips to avoid hiding UI elements</div>
    <div class="accordion-content">
     <p>

Position Tooltips carefully so they don’t obscure important elements on your page. Improper positioning of Tooltips could lead to a poor user experience.
![Do not hide elements.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Do%20not%20hide%20elements%282%29.png){height="" width="700"}
</p></div></div>

<div class="accordion">
    <div class="accordion-toggle"> Avoid unnecessary Smart Tips</div>
    <div class="accordion-content">
     <p>

Avoid adding Smart Tips for fields that are self-explanatory. Keep Smart Tips focused on areas that truly need clarification.
![Unnecessary smart tip\(1\).png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Unnecessary%20smart%20tip%281%29%281%29.png){height="" width="700"}
</p></div></div>

<div class="accordion">
    <div class="accordion-toggle"> Add videos for better user engagement</div>
    <div class="accordion-content">
     <p>

Include videos in the Tooltips to engage users, particularly for complex processes or onboarding new users. Add videos using the [Rich Text Editor](/studio/docs/using-the-whatfix-rich-text-editor){target="_blank"}.
         
<div class= "borderthick">
<img src="https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/smart%20tip%20video%20embed%20gif.gif">
</div>

For more information, see [Add a video to a Smart Tip](/studio/docs/add-a-video-to-a-smart-tip){target=`_blank`}.
</p></div></div>
<div class="accordion">
    <div class="accordion-toggle"> Use contrasting colors to highlight tooltips</div>
    <div class="accordion-content">
     <p>

Choose contrasting colors to make Tooltips stand out on the website or application. This ensures that Tooltips are visible and effective. For more information on contrast checking, see the [contrast checker website](https://webaim.org/resources/contrastchecker/){target="_blank"} that could help you decide. 
![Contrast color\(2\)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Contrast%20color%282%29.png){height="" width=""}
</p></div></div>


<div class="accordion">
    <div class="accordion-toggle"> Write clear and concise content</div>
    <div class="accordion-content">
     <p>
     
Use simple language and keep the descriptions brief in the Tooltips. Clear, concise content ensures better user comprehension.
![Description simple\(2\)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Description%20simple%282%29.png){height="" width=""}
</p></div></div>


<div class="accordion">
    <div class="accordion-toggle"> Place images appropriately within Tooltips</div>
    <div class="accordion-content">
     <p>

Ensure that the images within Tooltips don’t exceed 270 pixels in width to avoid distortion or the appearance of a scroll bar.
![distorted image\(2\)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/distorted%20image%282%29.png){height="" width=""}
</p></div></div>

<div class="accordion">
    <div class="accordion-toggle"> Choose an appropriate theme for the Tooltip
    </div>
    <div class="accordion-content">
     <p>

Select a Tooltip theme that matches your website or application’s UI to maintain a cohesive design. 
![bestpractices_tooltips](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/bestpractices_tooltips.png){height="" width="700"}
         
For more information on customizing tooltips, see [Smart Tips Customization](/studio/docs/smart-tips-customization){target=`_blank`}.
</p></div></div>

## Related

- [Smart Tips appear randomly](/smart-tips-appear-randomly.md)