How to Add Tooltip to AI Chatbot Widget

Ask the Community General Questions
1

Hi there!

Does anyone know how to add a tooltip (displayed on hover) for the AI Chatbot widget?

I’d like the toolip to say: “Launch AI Chatbot” or “Click here to launch AI Chatbot”

I tried these methods (i.e., modifications) but they did not work:

Method 1: (Did Not Work)

<!-- Elfsight AI Chatbot | Company AI Chatbot -->
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-(number)" title="Launch AI Chatbot" data-elfsight-app-lazy></div>

Method 2: (Did Not Work)

<!-- Elfsight AI Chatbot | Company AI Chatbot -->
<div title="Launch AI Chatbot">
        <script src="https://elfsightcdn.com/platform.js" async></script>
        <div class="elfsight-app-(number)" data-elfsight-app-lazy></div>
    </div>

Thank you!

1 Like
How to display a custom tooltip on AI Chatbot bubble hover
Dynamic Tooltip | Pop Out then Hide
AI chatbot different languages
2

Hey,

This is a fascinating idea! Never thought of this, but I see how this can be useful :100:

As it’s not a feature that can be implemented easily from the widget editor, I’ll ask the team if the on-hover tooltip can be implemented for the widget. Will report on this one soon :saluting_face:

2 Likes
4

Hey there :slight_smile:

As always, thank you so much for your help. I understand. In case you’re wondering, here are the main benefits of incorporating the tooltip:

  1. Accessiblity. As your developers look into this, make sure they use the “aria-label” attribute (and others, as applicable) in their code.
  2. Boost Confidence and Clicks. Site visitors are many times hesitant to click icons, images, or links if they don’t know what they do or lead up to. Adding the tooltip will clearly define what your widget does.

Note: If and when implemented, please make sure the widget editor/test panel incorporates an option to enter the desired text for the tooltip.

Other: You’re invited to visit our site to experience our current tooltips in action (minus your AI Chatbot widget). Simply hover over our links, buttons, and icons. :slight_smile:

Thank you!

1 Like
6

Thanks for sharing!

The custom tooltip can be added using this CSS code:

.global-styles,
.eapps-ai-chatbot-9019baa4-6ea8-4e64-9856-5eab9dc16b55-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;
}

As this element isn’t a basic part of the widget, we’ll need a bit more time to figure out the aria-label part. I’ll get back to you on that in some time :raising_hands:

Btw, your website looks cool! Keep it up :slight_smile:

3 Likes
8

Worked like a charm! Thank you so much – for the solution and your compliment. You and your team rock!

3 Likes
9

Hi @Irene,

I wanted to provide three (3) very useful tips for you and the community, and also ask you a favor:

  1. For websites that use a language translation dropdown or converter, the above CSS code (i.e., the tooltip content language) will not be translated unless you add the same CSS code but modified, say for Spanish (ES), in the CSS settings section of the widget as shown here: (repeat this for all other languages the website uses).

html[lang=“es”] .global-styles,
html[lang=“es”] .eapps-ai-chatbot-9019baa4-6ea8-4e64-9856-5eab9dc16b55-custom-css-root [class*=“FloatingButton__FloatingButtonContainer-sc”]:hover:after {
content: ‘¡Chatea con nosotros!’;
position: absolute;
font-size: 18px;
top: -48px;
right: 48px;
background: #e14d43;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #e14d43;
white-space: nowrap;
direction: ltr;
text-align: left;
}

  1. Some languages, Hindi (HI) for example, use the right-to-left (RTL) convention. So in these cases, the above code needs to be modified as follows: (see bold characters)

html[lang=“hi”] .global-styles,
html[lang=“hi”] .eapps-ai-chatbot-9019baa4-6ea8-4e64-9856-5eab9dc16b55-custom-css-root [class*=“FloatingButton__FloatingButtonContainer-sc”]:hover:after {
content: ‘हमसे चैट करें!’;
position: absolute;
font-size: 18px;
top: -48px;
right: 48px;
background: #e14d43;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #e14d43;
white-space: nowrap;
direction: rtl;
text-align: right;
}

  1. The CSS selector given above:

.eapps-ai-chatbot-9019baa4-6ea8-4e64-9856-5eab9dc16b55-custom-css-root

works only for our AI Chatbot widget. For those who wish to use above CSS code(s), they need to use the unique value assigned to their AI Chatbot widget (highlighted above in bold), which is provided in the Install section of their dashboard.

  1. Would it be possible to summarize the above and transfer the “minimized” version of this topic to the “CSS Code” section of this community?

And last, you’re invited to visit our site for a live demo!

I hope this helps!

Petar

3 Likes
14

Hey there, @Petar_Dietrich :waving_hand:

A huge thank you for all your contributions! We’ve published a step-by-step tutorial demonstrating your use case in action - How to display a custom tooltip on AI Chatbot bubble hover.

Feel free to check it out :wink:

1 Like
15

Honored! Thank you. It’s all about teamwork!

“All for one and one for all.” – Alexandre Dumas

Salud! :champagne: :clinking_glasses:

2 Likes
16

Couldn’t agree more, @Petar_Dietrich :100:

1 Like