Tooltip of Persona has different display in Chrome and IE11.

[neil-ji]

Environment Information

• Package version(s): 7.77
• Browser and OS versions: IE11.0.9600.19678

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Chrome: Every thing is OK.
IE11: When the mouse pointer moves over the Persona in Suggestion, Tooltip does not display if the text is overflowed. The selected Persona in the input box is sometimes displayed when the text does not overflow and sometimes it does not (I guess it depends on the length of the text, but the calculation is wrong in IE11).

Expected behavior:

Chrome and IE11: When the mouse pointer moves over the Persona in Suggestion, ToolTip is displayed if the text overflows, otherwise ToolTip is not displayed, and the selected Persona in the input box should have the same performance.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: High

[ecraig12345]

Thanks for filing this, but you'll need to add a CodePen repro before we can help. You can start from one of the examples (go to a control's page, scroll to the examples, and click "Export to CodePen") or https://aka.ms/fluentpen.

[msft-github-bot]

Thanks for taking the time to enter an issue. However, it seems that there aren't enough details here for this issue to be actionable.

When issues are created, we need details such as:

1. Which Fluent UI component is causing the issue
2. Which package name and version the component is from
3. What behaviors and attributes are missing or incorrect
4. What you expected and what is actually happening
5. Confirmation that the problem reproduces in isolation

Without a clear understanding of these details, it's not possible to take clear action on issues. We are unable to meet your expectations, properly address the root cause, and make changes without affecting the expectations of other consumers.

Please provide these additional details as you are able. The default issue template provides an outline of these details and is viewable when creating a new issue. Additionally, if this is an accessibility issue, please see Accessibility Troubleshooting in our wiki for more guidance. If these details cannot be provided, please kindly close the issue.

Thank you for your patience.

[neil-ji]

Code Pen does not work in IE11, and fluent ui document site can not access in IE11 either. I'm trying other ways to show you a demo. If you have a way to create a share link under IE11, please let me know. If there is no good way, I will provide you with an IP address for the demonstration later.

[ecraig12345]

You can make a codepen in another browser, open it in debug mode (last option shown in the screenshot), copy the link, and use the debug mode link in IE 11.

(Note that the debug mode option only shows up if you're logged into codepen. But once you create the debug mode link you don't have to be logged in to use it.)

I'm not sure what you mean about the Fluent UI doc site not working in IE 11--I just checked it now and it works for me.

[neil-ji]

Thanks for your patience. I shared a codepen link.

Edit View Link: https://codepen.io/liubaix/pen/PoPBGLV
Debug View Link: https://cdpn.io/liubaix/debug/PoPBGLV/wQrPozDZdGQM

Bugs in IE11:

1. In the input box, persona text does not overflow but Tooltip appears(Test the string 'Neil Neil').
2. In suggestion, persona does not show any tooltips, even if text is overflowed.

[msft-github-bot]

@ecraig12345

Gentle ping that this issue needs attention.

[ecraig12345]

Sorry for the delay. Comparing the behavior in Chrome and IE 11, I can see the second issue you mentioned but not the first one. Can you share a screenshot of the first issue?

In either case, this is not likely to be high-priority for us to fix since IE 11 is nearing end of support and Edge Chromium is now available for all Windows versions.

[neil-ji]

Well, if you think so, I need to think of other ways to solve the problem.
This is a screenshot of the first issue, test string is Neil Neil Neil.

[ecraig12345]

Ah, I'm guessing that one is by design. The computation of whether the text has overflowed may be a bit expensive or hard to time, and there's no harm in showing the tooltip even when it's not strictly needed.

[neil-ji]

Okay, but we felt that this inconsistency in behavior might confuse the user. I'd appreciate it if you could give me some advice to solve it.

[msft-fluent-ui-bot]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.