<s-tooltip> not showing on <s-button-group>?

Polaris
1

Hi,

I would like to use “s-tooltip” for the buttons in “s-button-group”.

However, when I do this, no tooltips are displayed.

However, if I remove the “s-button-group” again, it is displayed correctly as usual.

Is this intentional or a bug? I couldn’t find anything in the documentation that said this wasn’t allowed. In my opinion, it would be important if you only have pure icons as a group.

Here are my examples for you to try out:

Works:

<s-tooltip id={`edit-tooltip`}>
  Bearbeiten
</s-tooltip>
<s-button
  interestFor={`edit-tooltip`}
  ref={`/beispiele/${getIdFromGid(node.id)}/edit`}
  variant="primary"
  >
  <s-icon type="edit"></s-icon>
</s-button>

Doesn’t work:

<s-button-group>
  <s-tooltip id={`edit-tooltip`}>
    Bearbeiten
  </s-tooltip>
  <s-button
    slot="secondary-actions"
    interestFor={`edit-tooltip`}
    href={`/beispiele/${getIdFromGid(node.id)}/edit`}
    variant="secondary"
    >
    <s-icon type="edit"></s-icon>
  </s-button>
</s-button-group>
2

@puppyspike I had the same issue but once I moved <s-tooltip> outside of the <s-button-group> it started to work fine for me:

<s-tooltip id="reorder-btn-tooltip">You need to enable the manual order first in the "Map styling" settings.</s-tooltip>
<s-button-group>
  <s-button slot="primary-action" variant="primary" icon="plus">Add location</s-button>
  <s-button slot="secondary-actions" icon="delete" tone="critical">Clear all locations</s-button>
  <s-button slot="secondary-actions" disabled interestFor="reorder-btn-tooltip" icon="reorder">Reorder locations</s-button>              
</s-button-group>

It’s not in the documentation, I just found this by experimenting with my code…

3

That worked for me too.

Too bad that something like that is not in the documents or not just “both” work.

4

Has the docs been updated to reflect this, or is it still a guessing game to know if the docs tell the truth? I ran in to this problem as well, but managed to figure it out with the help of this thread.

But I’m shocked that the docs aren’t immediately updated once something like this is revealed. The community forums is the only way to communicate with Shopify Staff regarding these web components, now that the React components are deprecated. But there are no staff in these forums?

Had the components been open source, it would’ve been very easy to figure out if this was intentional or not.