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	b66392a
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/6787bf57218e0d00080a68f1
😎 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	b66392a
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6787bf576a25840008372495
😎 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	b66392a
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6787bf57ad7e110008564554
😎 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

All modified and coverable lines are covered by tests ✅

Project coverage is 84.18%. Comparing base (f93ca3c) to head (b66392a).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17964      +/-   ##
==========================================
+ Coverage   84.17%   84.18%   +0.01%     
==========================================
  Files         408      408              
  Lines       14435    14432       -3     
  Branches     4640     4691      +51     
==========================================
- Hits        12150    12149       -1     
+ Misses       2121     2119       -2     
  Partials      164      164              

☔ 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.