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	55dbdb0
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/672c426371ca91000870ea60
😎 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	55dbdb0
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/672c4263ba65ef000886f32c
😎 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	55dbdb0
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/672c42630cd7fd0008e48349
😎 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 81.82%. Comparing base (cdc8db7) to head (55dbdb0).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #17964   +/-   ##
=======================================
  Coverage   81.82%   81.82%           
=======================================
  Files         404      404           
  Lines       14067    14067           
  Branches     4360     4380   +20     
=======================================
  Hits        11510    11510           
+ Misses       2395     2394    -1     
- Partials      162      163    +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.