Simple usage of sp-tooltip gives a hard time

[abourget]

I'm trying to make a simple usage of the sp-tooltip component as such:

         <sp-icon-info size="s">
              <sp-tooltip self-managed placement="right">
                 Display something in here.
              </sp-tooltip>
            </sp-icon-info>

but I get this message when sp-tooltip tries to navigate the tree up to find its trigger element:

Self managed <sp-tooltip> elements walk up the composed tree to acquire a trigger element. No trigger element was found before the document.

Inspect this issue in the follow element: <sp-tooltip self-managed placement=​"right" dir=​"ltr">​…​</sp-tooltip>​ 

https://opensource.adobe.com/spectrum-web-components/components/tooltip#self-managed-overlays

I've noticed it was affected by the focusableSelector, so I tried to put a focusable attribute on the parent, but to no avail.

It's not been clear for me how to use that one, and I get into very low-level research.

Anything would help at this point :)

thanks!

[Westbrook]

An <sp-icon-*> element is not an interactive element and as such can not accessibly accept a Tooltip. The right path would be to use a button wrapper, something like:

<sp-action-button size="s">
  <sp-icon-info></sp-icon-info>
  <sp-tooltip self-managed placement="right">Display something here</sp-tooltip>
</sp-action-button>

[abourget]

So what is the criteria for being tooltip-able? How is an interactive element defined? I didn't find that in the doc, but the source talked about focusableSelector, which is why I tried to add focusable, or to wrap it in a , but it still didn't work.

But is there a reason the element needs to be interactive? I wanted to have a little info icon that shows something more when hovered. What would be your suggestion for such a pattern?

Let me try that though, and thanks for the response :)

[abourget]

Ok, works well.

Would be useful to have that caveat about being wrapped in an interactive element in the docs. https://opensource.adobe.com/spectrum-web-components/components/tooltip/

I understand though, that someone using tab navigation would not be able to see the tooltip if it weren't interactive/focusable. I guess that would be helpful to know up-front too.

Thanks @Westbrook !

[Westbrook]

Yeah, those docs are a bit lacking... I've added #3787 to track and expand the direction listed there.