fix: definition tooltip breaks with large text

[preetibansalui]

Closes #17848

Definition Tooltip breaks with large text

Changelog

1. Update default align value to bottom instead of bottom-start
2. Added autoAlign prop

Testing / Reviewing

1. Go to Storybook > Definition Tooltip > Default
2. Hover on text, it should open the tooltip.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	8e4f04f
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67a9c4dd13819e00084f2e1e
😎 Deploy Preview	https://deploy-preview-17964--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	8e4f04f
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67a9c4dd9852d800085ac511
😎 Deploy Preview	https://deploy-preview-17964--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8e4f04f
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67a9c4ddf54097000890fe14
😎 Deploy Preview	https://deploy-preview-17964--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 63.63636% with 4 lines in your changes missing coverage. Please review.

Project coverage is 84.03%. Comparing base (ca5f92f) to head (8e4f04f).

Files with missing lines	Patch %	Lines
packages/react/src/components/Popover/index.tsx	60.00%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17964      +/-   ##
==========================================
- Coverage   84.04%   84.03%   -0.02%     
==========================================
  Files         408      408              
  Lines       14470    14473       +3     
  Branches     4660     4662       +2     
==========================================
+ Hits        12162    12163       +1     
- Misses       2142     2145       +3     
+ Partials      166      165       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[2nikhiltom]

LGTM

[Gururajj77]

Looks good!

[guidari]

@preetibansalui
I just have one question regarding alignment, and maybe we can involve design.
I feel like the caret should always stay centered on the trigger element, but with auto-align, that’s not the case. The caret’s position is instead based on the text length within the definition tooltip.

Other than that, the fix looks good to me.

[preetibansalui]

@preetibansalui I just have one question regarding alignment, and maybe we can involve design. I feel like the caret should always stay centered on the trigger element, but with auto-align, that’s not the case. The caret’s position is instead based on the text length within the definition tooltip.

Other than that, the fix looks good to me.

That autoAlign is an optional prop so depends on user in what condition they want to make it on.

[laurenmrice]

@preetibansalui When the autoAlign prop is set to True, the "bottom" alignment looks fine, but the "bottom-left" and "bottom-right" caret is visually off. I also think that if the user is choosing a "bottom-left" or "bottom-right" alignment, the tooltip container needs to be vertically flush with the definition text depending on which alignment is being used.

---

• Also unrelated, but there seems to be some more spacing alignment bugs with some of the alignment options that is unrelated to this PR, and I can make a separate issue for that in our repo.

[preetibansalui]

@preetibansalui When the autoAlign prop is set to True, the "bottom" alignment looks fine, but the "bottom-left" and "bottom-right" caret is visually off. I also think that if the user is choosing a "bottom-left" or "bottom-right" alignment, the tooltip container needs to be vertically flush with the definition text depending on which alignment is being used.

* Also unrelated, but there seems to be some more spacing alignment bugs with some of the alignment options that is unrelated to this PR, and I can make a separate issue for that in our repo.

Hey @laurenmrice , Sorry little confusion here.
Do you want me to add a padding from left/right in case of bottom-left or bottom-right as you shown me in the image attached?

In that case will it be similar for top-left or top-right as well?

Also, do we have to tackle it in tooltip component as well to make consistency?

[laurenmrice]

@preetibansalui

Do you want me to add a padding from left/right in case of bottom-left or bottom-right as you shown me in the image attached?

When the tooltip container appears, it needs to align vertically flush with the beginning (bottom-left) or end (bottom-right) of the definition tooltip text on the page. If adding padding from left/right helps resolve that then yes.

In that case will it be similar for top-left or top-right as well?

Yes, if that is possible to do for the top-left and top-right alignments then those could be adjusted as well with the same logic but on the top instead of the bottom.

Also, do we have to tackle it in tooltip component as well to make consistency?

Would that be a separate PR from this? I see some spacing issues in the Tooltip component, but it's mostly around where the caret is being placed on the tooltip container.

[guidari]

Hey Preeti!

I guess the caret is in the wrong position, right?

The design specs:

Here it is the deploy preview with bottom-right. It happens with the other postions like bottom-left/right and top-left/right

[preetibansalui]

ens with the other postions

Hmm.. I think it's taking the tooltip to the position we are assigning, not sure about what logic it's applying to calculate the arrow position. Let me check how we are showing for other tooltip/popover with large target text.

[tay1orjones]

A few small things I saw in the comments below. Does this fix the root issue of DefinitionTooltip's misplaced caret with long text without having to turn on autoAlign?

[tay1orjones]

@preetibansalui just wanted to confirm this can be fixed without having to turn on autoAlign?