Polaris <Link> and <Button> Components Not Clickable Inside Tooltip Content

Shopify Apps
1

Hi everyone!

I’m encountering an issue where the and components from Shopify’s Polaris library are not clickable when placed inside the content of a . I’ve been trying to implement this functionality, but despite various attempts, I haven’t been able to get the and components to respond to clicks within the tooltip.

When using Shopify’s Polaris component, I’ve noticed that interactive elements such as and within the tooltip’s content do not seem to be clickable. This seems to be a limitation or behavior intrinsic to how the component handles its content.

Example Code:

Here’s a simplified example of what I’m trying to achieve:

import { Tooltip, Text, Link } from '@shopify/polaris';

export default function ExampleComponent() {
  return (
    
  );

In this example, the inside the tooltip content is not clickable. I’ve verified that the URL is correct and that the component works fine outside the tooltip context.

What I’ve Tried:1. Changing Tooltip Placement: Adjusting the placement of the tooltip didn’t resolve the issue.

  1. CSS Adjustments: Tried overriding tooltip CSS properties to ensure nothing is blocking the click events.
  2. Using : Attempted similar implementations with , which also did not work.

I expect the and components inside the tooltip to be clickable and navigate to the specified URL or trigger an action when clicked.

Has anyone else encountered this issue? Are there any workarounds or solutions to make interactive elements inside a Polaris clickable? Any insights or suggestions would be greatly appreciated!

Thank you in advance for your assistance!

1 Like