Skip to main content
Answered

How can I create a tooltip on dropdown menu

  • 21 June 2024
  • 2 replies
  • 190 views

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? 

2 replies

M

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
Userlevel 4
Badge +4

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 🚀

Bernice | Customer Support Engineer

Reply


Terms & ConditionsCookie settings