Howdy,
Can you provide a JS code that will allow the “tooltip” created by this post to pop out then hide after a given time interval?
For example, upon opening or landing on a web page, display the tooltip either:
Thank you!
Hello there, @AeroConsultants 
Right now, the custom tooltip shows up when you hover over the bubble. Do I understand correctly that this feature should be completely disabled?
And about the popout/hide functionality — once the tooltip disappears after 3 seconds, it shouldn’t come back automatically after 3 seconds again, right?
Hi @Max,
No, keep the tooltip on hover feature.
To clarify, I was simply wondering if Team Elfsight can provide a code snippet that will make the tooltip text pop-out immediately (automatically, without hovering over the chatbox) upon visiting or landing on a web page, then hide after say 3 seconds.
And yes, after the tooltip text hides, it stays hidden. After that, the tooltip text only displays when the user hovers over the chatbot bubble.
Makes sense now? Other suggestions are always welcome.
Got it, thanks!
Yep, it’s possible and our devs wiil create a custom script for you. I’ll keep you updated 
Hi @Max,
I noticed this morning your developers are currently testing a JS code to accomplish the above. So far, at my end, it’s looking great. When done with your testing, please let me know.
Also:
(1) Please ensure the CSS and/or JS code allows the user to change the time for the auto-display and auto-hide functions.
(2) When done, please point out to me what code line(s) I need to look at to change the position of the tooltip (your developers – in test mode – changed the original, intended position of the tooltip).
Looking forward to your final “master creation” 
Cheerio!
PS: I noticed the following “error” in our configurator. I’m sure your developers will address it.
Yes, our devs replaced the previous CSS code with the new one:
.custom-chat-tooltip {
position: absolute;
font-size: 1rem !important;
top: -50px;
right: 0;
background: #e14d43;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #e14d43;
white-space: nowrap;
direction: ${isRTL ? 'rtl' : 'ltr'};
text-align: ${isRTL ? 'right' : 'left'};
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10000;
pointer-events: none;
font-family: sans-serif;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.custom-chat-tooltip.force-visible {
opacity: 1;
visibility: visible;
}
[class*="FloatingButton__FloatingButtonContainer-sc"]:hover .custom-chat-tooltip {
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 600px) {
.custom-chat-tooltip {
display: none !important;
}
}
And this script was added to the Custom JS field:
(function AddTooltip() {
const translations = {
default: "Need help? Ask us anything.",
es: "¿Necesitas ayuda? Pregúntanos lo que sea.",
fr: "Besoin d'aide ? Demandez-nous n'importe quoi.",
de: "Brauchen Sie Hilfe? Fragen Sie uns alles.",
pt: "Precisa de ajuda? Pergunte-nos qualquer coisa.",
vi: "Cần giúp đỡ? Hãy hỏi chúng tôi bất cứ điều gì.",
// RTL
hi: "मदद चाहिए? हमसे कुछ भी पूछें।",
ar: "تحتاج مساعدة؟ اسألنا أي شيء.",
};
const currentLang = document.documentElement.lang || "en";
const isRTL = ["hi", "ar"].includes(currentLang);
const text = translations[currentLang] || translations["default"];
waitForElement('[class*="FloatingButton__FloatingButtonContainer-sc"]').then(
(chatButton) => {
if (!chatButton.querySelector(".custom-chat-tooltip")) {
const tooltipDiv = document.createElement("div");
tooltipDiv.className = "custom-chat-tooltip force-visible";
tooltipDiv.textContent = text;
const computedStyle = window.getComputedStyle(chatButton);
if (computedStyle.position === "static") {
chatButton.style.position = "relative";
}
chatButton.appendChild(tooltipDiv);
setTimeout(() => {
tooltipDiv.classList.remove("force-visible");
}, 3000);
}
},
);
})();
The display duration is set in milliseconds and you can change it here:
Regarding the validation error, I’ll discuss it with the devs and will update you once i have their response
Thank you, @Max!
As always, I am EXTREMELY IMPRESSED with your team’s response time. Over the top!
If possible, can you provide a modified (optional) code that will display the tooltip, say, 2 seconds after a visitor lands on a page (instead of immediately on page landing)? 
Standing by for the validation error fix as well.
Once the above is resolved, we’re back in the game! Hopefully, you and your team will agree that this new feature will benefit all of your customers.
Again, thank you!
Thank you so much for your kind words!
The validation error has been fixed! As for the modified script for the tooltip, I’ve reached out to the devs and they’ll provide an adjusted version for you 
Here is a script that triggers the tooltip in 2 seconds after the page load:
(function AddTooltip() {
const translations = {
default: "Need help? Ask us anything.",
es: "¿Necesitas ayuda? Pregúntanos lo que sea.",
fr: "Besoin d'aide ? Demandez-nous n'importe quoi.",
de: "Brauchen Sie Hilfe? Fragen Sie uns alles.",
pt: "Precisa de ajuda? Pergunte-nos qualquer coisa.",
vi: "Cần giúp đỡ? Hãy hỏi chúng tôi bất cứ điều gì.",
// RTL
hi: "मदद चाहिए? हमसे कुछ भी पूछें।",
ar: "تحتاج مساعدة؟ اسألنا أي شيء.",
};
const currentLang = document.documentElement.lang || "en";
const text = translations[currentLang] || translations["default"];
waitForElement('[class*="FloatingButton__FloatingButtonContainer-sc"]').then(
(chatButton) => {
if (!chatButton.querySelector(".custom-chat-tooltip")) {
const tooltipDiv = document.createElement("div");
tooltipDiv.className = "custom-chat-tooltip";
tooltipDiv.textContent = text;
const computedStyle = window.getComputedStyle(chatButton);
if (computedStyle.position === "static") {
chatButton.style.position = "relative";
}
chatButton.appendChild(tooltipDiv);
setTimeout(() => {
tooltipDiv.classList.add("force-visible");
setTimeout(() => {
tooltipDiv.classList.remove("force-visible");
}, 3000);
}, 2000);
}
},
);
})();
You can control this delay here
Magnificent! Thank you. Kudos to both you and your developers. Changes are now “live.”
Time permitting, it would be great if you can capture and disemminate the above under “Pro Tips.” It would certainly help your customers.
Enjoy the rest of your week.
Cheerio!
Great! Yep, we’ll add this info to the Pro Tips section.
Thank you so much for the feedback
