How to display a custom tooltip on AI Chatbot bubble hover

[Max]

Inspired by this discussion (kudos to @AeroConsultants), we’ve put together a step-by-step guide on how to display a custom tooltip when hovering over the AI Chatbot bubble

Creating a Custom Tooltip

Here’s the code to create a custom tooltip for the AI Chatbot bubble:

.global-styles,
.eapps-ai-chatbot-YOUR_WIDGET_ID-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"]:hover:after {
  content: 'Launch AI Chatbot';
  position: absolute;
  font-size: 16px;
  top: -35px;
  right: 30px;
  background: #111;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

Replace YOUR_WIDGET_ID with the ID of your widget, and paste this code into the Custom CSS field under the General tab of your widget’s settings.

Note: Feel free to tweak the text and design of the tooltip by modifying the values in the code to match your preferences.

Translating Tooltip Text for Multilingual Websites

The code from step 1 won’t be automatically translated when switching between language versions of your website.

To add translated tooltips for other languages, simply add the language codes and the corresponding text to the CSS code from step 1. Then, paste the updated code into the Custom CSS section.

Here’s an example for the Spanish language:

/* Spanish */
html[lang="es"] .global-styles,
html[lang="es"] .eapps-ai-chatbot-YOUR_WIDGET_ID-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"]:hover:after {
  content: '¿Necesitas ayuda? Pregúntanos lo que sea.';
  position: absolute;
  font-size: 18px;
  top: -56px;
  right: 34px;
  background: #e14d43;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #e14d43;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
}

What’s changed:

• Added html[lang="es"] before .global-styles and .eapps-ai-chatbot-YOUR_WIDGET_ID-custom-css-root

• Changed the tooltip text in the content line to the Spanish version

Repeat this for all other languages the website uses

If you’re using RTL languages (like Hebrew), don’t forget to add the following to your CSS code:

direction: rtl;
text-align: right;

This video demonstrates the code in action on the website of @AeroConsultants

Guys, was this solution helpful to you? Let us know in the comments

[user31665]

Love it! Thanks for that.

[Max]

Welcome to the Community, @user31665

We’re so happy to know this solution worked for you! Thanks a lot for the feedback