How can I create a tooltip on dropdown menu

Question

I have a dropdown menu that opens once click on "Actions," but when I use the tooltip and I need to click on the intercom icon, the dropdown menu closes and I'm not allowed to place the icon where I want.  Any solution on this case?

bernice · Accepted Answer

Hi@Priscilla Maldonado👋To ensure tooltips display properly on variable elements, you can annotate the HTML on your site with a special attribute that Intercom can look out for. Specifically, add the data-intercom-target="..." attribute to the elements you want to target with tooltips. For example, if you want to target a start button, you would add data-intercom-target="Start button" to the button's HTML element. This makes it more likely that tooltips will continue to work correctly even if there are small changes to your product.When displaying tooltips, Intercom looks for the element or the target text on the page before displaying the tooltip anchor. If targeting a CSS selector, you can use the document.querySelector('div'); method to find a selector on the customer’s page. To confirm if the text is on the page, simply search the page for the text that you are targeting. Additionally, you can use a JavaScript function to log whether the text was found or not to the console, which mimics what tooltips do when trying to find text on a page.For more detailed guidance on creating and testing tooltips, you can refer to our Help Centerarticles on how to create a Tooltipand Manually choose the CSS Selector for Tooltips 🚀

massimodutte · Answer

Ensure that the dropdown menu does not close when interacting with certain elements inside it. This can be done by modifying the event listeners responsible for closing the dropdown.// Example using jQuery$('.dropdown-menu').on('click', function(event) { event.stopPropagation();});

Join the Intercom Community 🎉

Intercom Customers and Employees

Login to the community

Intercom Customers and Employees

Scanning file for viruses.

This file cannot be downloaded