Bug: s-tooltip doesn't show on s-clickable with href

Polaris
1

The tooltip displays nicely with onClick:

<s-tooltip id={"my-tooltip"}>Click!t</s-tooltip>
    <s-clickable
      interestFor={"my-tooltip}
      onClick={()=>{}}
    >
      <s-box padding="none small-200 none small-200">
        <s-icon type="payout" />
      </s-box>
    </s-clickable>

But not with href:

<s-tooltip id={"my-tooltip"}>Click!t</s-tooltip>
    <s-clickable
      interestFor={"my-tooltip}
      href={"#"}
    >
      <s-box padding="none small-200 none small-200">
        <s-icon type="payout" />
      </s-box>
    </s-clickable>

Seems like the tooltip should be there regardless?

2

@Anthony_Frehner another one for you!

3

Hey Ryan, we’re working on this one. Thanks for flagging it

4

Hey Ryan, we’ve been working through the fix and trying to think of use cases for allowing tooltip on links. Can you share your use case here? We’re going to get UX to weigh in on this as well.

Some things to keep in mind. Tooltips should be used sparingly, in my opinion. They hide details that could be important to your users and more importantly they don’t show up at all on mobile devices, this is by design.

5

@Kyle_Durand Fair point. I ended up not using the tooltip at all in the design I decided on. I was giving additional context about a button/link but decided it wasn’t ideal and there was a better solution. Your points about mobile are good ones.

From a DX perspective, different behaviour of interestFor depending on whether href vs onclick is used is a bit surprising, so I’d at least document this. But then why not just normalise the behaviour? It’s not preventing tooltip use for links as-is – it’s just forcing using javascript to navigate vs links. I understand that under the hood there may be reasons why it is this way (button vs link elements).

I think guidance or a note that tooltips don’t work on mobile (and should be used sparingly – i.e. for “extra” non-essential, but still useful context) on the tooltip doc page is a good idea.

6

We agree, we’ll ship a fix for this sometime soon. I’ll try to remember to report back here when that happens. Thanks for the feedback!