Skip to main content
Answered

How can I create a tooltip on dropdown menu


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? 

Best answer by bernice

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 Center articles on how to create a Tooltip and Manually choose the CSS Selector for Tooltips 🚀

View original
Did this topic help you find an answer to your question?

2 replies

Forum|alt.badge.img

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();
});

 


bernice
Intercom Team
Forum|alt.badge.img+5
  • Intercom Team
  • 230 replies
  • Answer
  • July 1, 2024

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 Center articles on how to create a Tooltip and Manually choose the CSS Selector for Tooltips 🚀


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings