[Feature Request]: InfoLabel does not show tooltip when hovered over

[FarhanMRahman]

Component

InfoLabel

Package version

9.49.2

React version

18.3.0

Environment

System:
  OS: Windows 11 10.0.26100
  CPU: (16) x64 AMD EPYC 7763 64-Core Processor
  Memory: 32.51 GB / 63.95 GB
Browsers:
  Edge: Chromium (131.0.2903.99)

Current Behavior

InfoLabel does not show any tooltip when hovered over. It has an aria-label of Information, but does not show any tooltip like many other FleuntUI buttons when it's hovered over.

Expected Behavior

When hovered over, InfoLabel should show a tooltip. Ideally it should be the same as its aria-label and show "Information" as hovered over. We can manually add a title prop and set the tooltip, but adding a tooltip would benefit other consumers as well since it'll be a great addition as an accessibility feature.

Expected behavior screenshot:

Reproduction

https://stackblitz.com/run?file=src%2Fexample.tsx

Steps to reproduce

1. Add an InfoLabel to a web page
2. Hover over the InfoLabel for a few seconds
3. No tooltip will be shown
4. Ideally it should show a tooltip after a few seconds of hovering over, saying "Information" (same as its aria-label)

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

loop.microsoft.com

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dmytrokirpa]

According to the docs the InfoButton uses Popover, not a Tooltip. To activate it, users need to click on it or press enter/space when it's focused.

So, it's not really a bug. It's more of a feature request that doesn't follow the spec

[FarhanMRahman]

Thanks for the explanation and updating the Issue! Please let me know if I should create a new Feature Request issue or you updating this instance would suffice.

[pradeept95]

I believe as a workaround you can modify infoButton popover props for InfoLabel. Following example might help you!

https://stackblitz.com/edit/9ctufvsq?file=src%2Fexample.tsx