Append tooltip to trigger element in the dom instead of last in body.

[Vempejul]

Is there a way to append the tooltip to the trigger element in the DOM instead of last in the body.

I am currently having an issue with accessibility due to the tooltip being added last in the DOM instead of relative to the element that triggers the tooltip.

The problem is that inside my tooltip there is a focusable element (an anchor tag in this case) and with an accessibility perspective I don't want to manually handle all tabindexes on my website (since that could cause problems for screen readers or open up for other problems, also it's a bit of bad practice, imo)

At the moment I am using a focus trap as a workaround but that creates other problems since it forces the users to actively close the tooltip to be able to continue with tabbing around on the page.

[naasimshareef]

I have a similar issue as well. Mine is a micro frontend, to be integrated to a container in another app. With the tooltip being appended to body, when this component is integrated within another app, my position values get messed up since the calculations need to happen with respect to its container, not the body. So is there anyway to append to a specific element instead of body?

[bsidelinger912]

Hey @Vempejul and @naasimshareef, these are kind of two different issues, where you both have a similar solution in mind. However, adding the tooltip next to the target presents a host of other positioning issues, and thus I've followed a fairly standard portal technique. However these issues your running into for your specific use cases should be resolvable for sure.

For the issue @Vempejul is facing, if I'm understanding correctly you'd like a user with a screen reader to be able to tab to your target element and then have the next item in the tab index be the link in your tooltip? Or would the target element not be tabbable? Right now we don't actually even render the tip content until the first time it's activated, so there's a few considerations in coming up with an optimal solution...

For @naasimshareef I'm not exactly understanding the issue your having. For your micro frontend architecture, are you using iframes? Or is the frontend sharing a DOM with the "shell" or whatever surrounds it? We've used this tooltip in a micro front end at my previous job and we had no problems with positioning, so I think I'll need a little more info to fully understand.

Right now we calculate all the positions based on the body of the document, by putting the tip in a portal we can do this without having issues with absolute, relative and fix ancestors of the target element. As soon as you start nesting the tooltip content next to the target you open up a lot of issues depending on how the ancestors are laid out, basically having to walk the DOM on every render detecting the position value of every ancestor and potentially calculating from the upper left corner of the ancestor. This would add complexity to what was intended to be a simple tooltip. Thus, hopefully there are simpler resolutions that we can find :-)

[Vempejul]

Hello!

I get it, traversing the DOM would have created other issues I am sure.

So instead I solved this in another way, which unfortunately means that for screen readers it will be a bit awkward still, since the screen reader won't read the links in the tooltip in the correct order.

But we decided to accept that and just fix the possibility to tab to the tabbable elements inside of the tooltip by findings the first and last focusable element inside the tooltip as well as the previous and next focusable element outside of the tooltip and then listening on the tab events, checking the activeElement and relatedTarget so that we can set .focus() on the correct element instead of depending on the tabindex.

[bsidelinger912]

Hey @Vempejul I agree this is not ideal. I'm working on a major version that will be focused around better a11y, this issue will definitely be something I try to address with that effort.

[dbyambajargal]

.tool-tip {
  position: fixed;
  top: 0;
  left: 0;
}

i used this code. and body scrolling fixed.

[Vempejul]

Hello! Any update on this issue? I'd be happy to lend my thoughts if you need them. :)