[Bug]: DefinitionTooltip issue with align property

[tw15egan]

Package

@carbon/styles

Browser

Chrome

Package version

@carbon/react v1.14.0

React version

v16

Description

When working on carbon-design-system/carbon-website#3104 I noticed that the align property was not calculating the caret position properly. Popover and Tooltip do not seem to have this issue

Reproduction/example

See above

Steps to reproduce

Go to DefinitionTooltip and try changing the align property, and compare it with Popover and Tooltip

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[FionaDL]

Hello, I would like to work on this :)

[tw15egan]

All yours, @FionaDL 👍🏻

[FionaDL]

Hello, we were only able to reproduce this bug in the playground, but the default seemed to be working. We think it has something to do with binding the arguments to the Playground story, as that is the only difference we could find. We were not able to solve this though. If someone else wants to work on this, please allow them, otherwise we will keep poking around.

[riddhybansal]

It works as intended, The caret position depends upon the size of the base word. If the user wants to make it more customise or more precise , they can override the classes as per there usage.

Moreover, The Caret positioning can be improved with the usage of floating UI. This will position the floating tooltip element at the position based on the alignment attribute.