Remove expand and close buttons tooltip

CSS Codes AI Chatbot
1

Add this code to the Custom CSS field on the General tab of your AI Chatbot widget’s settings:

/* Hide Elfsight popout tooltips globally */
.es-popout-wrapper {
  display: none !important;
  /* remove tooltip from view */
  pointer-events: none !important;
  /* ensure it does not block button clicks */
}
4 Likes
2

Thanks for sharing! You’re right. When the widget is expanded, the tooltips block the actual buttons or make them difficult to function.

3 Likes
6

Many thanks for sharing this solution, @Harram_Mehmood!

Glad to have you join our community :blush:

1 Like
7

Hey @Helga,

Perhaps you know this already, but the CSS rule provided by @Harram_Mehmood fixes a bug (as I previously described). Can you kindly ask you dev team to look into this?

Thank you!

1 Like
8

Hey @AeroConsultants,

I’ll step in for my dear colleague to help with this one :waving_hand:

I just tested our demo AI Chatbot and yours specifically in the widget editor. I made sure to remove the CSS code above to see what’s going on, but, unfortunately, couldn’t see how the tooltips are blocking the buttons.

Or maybe the issue is present only on the live website? We’d love to have a look, so it would be really helpful if you sent us a screenshot of how it’s like for you without the CSS, and a direct link to the page with the issue :folded_hands:

1 Like
9

Hi Irene,

Thanks for getting back to me. I removed the above CSS rule and the issue no longer exists.

Perhaps your dev team adjusted the baseline code of your widget in the last few days.

For future reference, specifically, this is what was happening: Every time I expanded the chat box and clicked on the collapse or close button, the tooltip was interfering with these buttons and not allowing me to either collapse or close the chat box. It happened randomly.

In short, it appears your dev team fixed the issue. If it happens again, I will report it here together with a screen cast.

Note: Since the icons used for the expand/collapse and close buttons are well-known these days, I have decided to disable the tooltips using the following CSS rule:

[class*="Tooltip__TooltipContainer-sc"] {
  display: none;
}

Salud!

3 Likes