Customizing Tooltips in Your Site Settings

Tooltips are a nifty way to provide your users with immediate, contextual information when they hover over elements on your website. This guide will take you through the process of customizing tooltips to match the look and feel of your website while ensuring they remain informative and user-friendly.

Accessing Tooltip Settings

Log into your Inline Help Dashboard.
Go to Site > Settings > Tooltips.

You'll be taken to a page where you can configure the design and behavior of your tooltips.

Configuring Tooltip Triggers

Elements: Specify the CSS selectors for the elements you want to trigger tooltips. For example, entering h3 span will show tooltips next to the h3 span element.

Customization Options

Enable AI Indicator: Toggle this on if you want to display an AI symbol on the tooltip, indicating that the content is dynamically generated.

Enable 'Ask about this': Activate this to include a button within the tooltip that users can click to ask more questions related to the tooltip content.

Enable rating: This allows users to rate the helpfulness of the tooltip, providing you with valuable feedback.
Display sources: If your tooltips use information from external sources, you can choose to display these for added transparency.

Designing the Tooltip Launcher

Customize the visual elements of your tooltip launcher to ensure it stands out or blends in with your page design as required:

Circle color: Choose the background color of the tooltip launcher icon.
Circle hover color: Select a color that appears when users hover over the tooltip launcher.
Circle fill color: Pick a color for the inside of the launcher circle.
Circle fill hover color: Choose a color for the inside of the launcher circle on hover.
Question mark color: Decide on the color of the question mark symbol.
Question mark hover color: Select the color of the question mark symbol when hovered over.

Size Customization

Size: You can stick with the default size or choose 'Custom' to enter your specific dimensions.

Width (px): If 'Custom' is selected, specify the width of the tooltip icon.

Height (px): Similarly, specify the height for the icon when 'Custom' size is chosen.

After making all your customizations:

Click the Save button to apply the changes to your tooltips.

Test the tooltips on your website to ensure that they are appearing correctly and that the design aligns with your site's aesthetics.

Conclusion

By customizing the tooltips feature, you can significantly enhance the user experience on your site. The tooltips not only serve as guides but also as interactive elements that can increase user engagement. If you need further assistance or have specific questions regarding tooltips, our customer support team is here to help.