React Tooltip Component doesn't align well with position="auto"

[derekgreer]

I'd like to use position="auto" to for cases where a given screen layout may cause a fixed position to be undesirable, but in the case of an error alert icon (!), the auto doesn't seem to align well. See the following as an example:

https://stackblitz.com/edit/react-jqq7hw?file=app%2Fmain.jsx

The desired state would be for the tooltip to be displayed with the callout pointing directly to the center of the component for anchorElement="target" whether auto results in top, bottom, left, or right. It shouldn't be 40+ pixels out to one side or another.

[simonssspirit]

Thank you for the report. This is actually the expected positioning of the callout when the position is set to auto. Still, I can agree that it does not look good with smaller elements. and we will check we can add an enhancement to this. Currently, the Tooltip is align based on the anchorElement. Aligning the callout at the center of the element has a limitation, as it will require moving the entire Toolip as with longer element the middle can be at the middle of the page. Moving the Tooltip can cause an issue as if the page is very wide, the center of the element can be outside of the visible part of the page.

Another option is to hide the callOut:

https://www.telerik.com/kendo-react-ui/components/tooltip/api/TooltipProps/#toc-showcallout

[derekgreer]

I would think most would expect the behavior of "auto" to be an automatic selection of one of the other options of top, bottom, left, right. At least, that's the desired behavior.

[simonssspirit]

@derekgreer thank you for the suggestion, we will consider adding this option as well as a fifth option instead of changing the current 'auto' option and causing a breaking change.

[Xizario]

From what I see the problem is that the callout is either 25% or at 75%. Tooltip itself looks correctly positioned. Is it possible to adjust the callout position after the tooltip renders?

[derekgreer]

@Xizario Well, it's positioned "correctly" in the sense that at least some part of the box is adjacent to the element, but I would submit that given the choices of "top", "bottom", "left", "right" or "auto", most people would assume that "auto" is going to automatically select one of the positions you could explicitly set. Currently, explicitly setting it to "bottom" and "auto" choosing a calculated position at the bottom isn't the same position not including the callout.

Now, I completely agree that what "auto" does is very helpful. For example, if you change my example at https://stackblitz.com/edit/react-jqq7hw?file=app%2Fmain.jsx to position at the bottom, it cuts off the left of the text.

Personally, I'd recommend the options of "auto" and "adaptive" where "auto" selects top/bottom/left/right automatically and "adaptive" works as "auto" does today. This does change the behavior of "auto", but I think you end up with more clear keywords long term. I get it though. You always want to avoid changing behavior on customers.

[Xizario]

I agree that the word 'auto' is misleading at this stage. If we add 4 more positions: top-left, bottom-left, top-right and bottom-right. The 'auto' will fit its description. And this can be done without breaking change.

Yet we need to fix the callout position.

[derekgreer]

@simonssspirit Any movement on this?

[simonssspirit]

We have just added a property to control the callout placement, which can be useful in this case:

https://www.telerik.com/kendo-react-ui-develop/components/tooltip/api/TooltipProps/#toc-setcalloutonpositionauto

The other topic on changing the behavior of the auto position is on hold for now as it will be a breaking change and we will need more feedback on this before we take that path.

[veej]

Is there any update on this? To me, the position of the tooltip itself is also unacceptable. Looking at this little variation on the example in the first comment, why the tooltip should be moved to the right (like in the first screenshot below), when it would perfectly fit if positioned with the callout in the middle of the element, as if we pass position="bottom"? It's totally counterintuitive and it looks broken.

The following would be the desired behaviour, but I cannot set a fixed position: bottom, since I want the tooltip to be moved automatically if there's not enough space on the bottom (that should be the point of using position="auto"):

Edit: even considering the setCalloutonPositionAuto, the result looks really strange: Also, what's the sense of asking me to set the Callout position in pixel when I'm specifically setting an auto positioning?