S-tooltip not working on mobile

Polaris
1

Hey!

s-tooltip works perfectly fine on desktop, but doesn’t seem to be clickable on mobile.

Could someone confirm if s-tooltip (web components) is also not working for you on mobile?

PS. I tried it from chrome inspect at first.

Here is a short example (also doesn’t seem to work with example in docs):

      <s-tooltip id="info-tooltip">
        Tooltip content
      </s-tooltip>
      <s-stack direction="inline">
        <s-text type="strong" interestFor="info-tooltip">
          More info
        </s-text>
      </s-stack>

Cheers

2

Tooltips won’t render on mobile. They are inherently a desktop pattern, intended to provide supplementary information rather than essential content. Because mobile interfaces do not support hover actions, alternative solutions such as using inline text for clarification or rethinking the necessity of tooltips are suggested.

3

Any reason why they couldn’t be clickable on mobile?

Like this:

4

Tooltips should not be used as clickable elements on mobile primarily due to their intended purpose and user experience considerations. Tooltips are meant to provide supplementary information and are activated via hover on desktop, which doesn’t translate well into a mobile interface where hover states don’t exist. Making tooltips clickable on mobile could inadvertently lead to them being used for essential interactions, which goes against the consensus that tooltips should not contain critical information necessary for understanding the UI. Instead, the recommendation is to focus on alternative patterns that are more suited to touch inputs, like popovers, or incorporating the supplementary information directly into the UI. This approach ensures that the mobile user experience remains intuitive and that screen space is used effectively without relying on tooltips as interactive elements.