[Tooltip] `tooltip()` directive does not support options

[jpzwarte]

Provide a general summary of the issue here

<sl-button ${tooltip('Hello world')}>

The above code will not work because:

• You cannot provide a context option using the directive like you can with Tooltip.lazy()
• Tooltip.lazy() defaults to target.shadowRoot, which in this case is the <sl-button> and that does not have <sl-tooltip> as a scoped custom element

We should improve tooltip()/Tooltip.lazy() to work better in this case.

👤 Your name

Jeroen

🧢 Your Product/Team

SLDS

[Diaan]

@jpzwarte The example you say doesn't work is basically what we have here: https://storybook.sanomalearning.design/?path=/story/overlay-tooltip--directive

Can you provide a clearer description on what doesn't work?

[jpzwarte]

@Diaan if i do this:

              <sl-button @click=${this.#onSettings} fill="ghost" ${tooltip(msg('Settings'))}>
                <sl-icon name="far-gear" size="lg"></sl-icon>
              </sl-button>

Then i get this error in the console:
The sl-tooltip custom element is not defined in the SL-BUTTON element. Please make sure to register the sl-tooltip custom element in your application.