TooltipHost renders native Tooltip in Safari with OverflowMode.Self

[pcapel]

Environment Information

• Package version(s): @fluentUI/react 7.117.3
• Browser and OS versions: Mac OS Catalina 10.15.5, Safari Version 13.1.1 (15609.2.9.1.2)

Please provide a reproduction of the bug in a codepen:

(must be viewed in safari, see the second example)
https://codepen.io/Philopotamus/pen/zYrPKdB?editable=true%3Dhttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui%2F

Actual behavior:

A native tooltip is rendered in addition to the component. At times, the state of the content is duplicated in appearance. If the tooltip should say "Hello, World!" the native tooltip shows "Hello, World!Hello, World!".

Expected behavior:

The only visible tooltip on the screen is the component.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

[paulgildea]

Thanks for the issue @pcapel !

I'm able to repo the behavior on my end and indeed the native tooltip renders on the second example that you call out.

I'll get this assigned to the code owner for now - but let us know if plan on submitting a PR - we welcome it 👍

[pcapel]

For sure! I'm going to look into it Friday. I'll be sure to update if I find that I am able to submit a PR in a reasonable time frame. Thanks!

[JustSlone]

Btw, here's a few articles with more information on this particular issue:

• https://zzz.buzz/2017/07/31/prevent-tooltip-over-truncated-text-in-safari/
• https://stackoverflow.com/questions/20974276/prevent-safari-from-showing-tooltip-when-text-overflow-is-hidden-with-ellipsis

It seems like if we could apply the CSS solution on TooltipHost that may work well to remove this behavior in Safari without affecting other browsers. We should be able to test this solution by updating hostStyles in the codepen above (I don't have a Mac right now to confirm on):

const hostStyles: Partial<ITooltipHostStyles> = {
  root: { 
      display: 'block', 
      padding: 10, 
      backgroundColor: theme.palette.themeLighter,
      '::after': {
        content: '',        
        display: 'block',
      }
  },
};

@pcapel, are you still interested in working on a fix?

@dzearing do you see any issue with the CSS hack to prevent the native Safari tooltip?

[pcapel]

@JustSlone sorry it's been a bit, things got a little hectic. Those are some great resources!

I can start working on something this Friday. Is there a communication channel for contributors to ask more general (development) setup questions? I've noticed that the package structure has undergone some changes even since I've been reading through the source.

Edit: I went ahead an tried the CSS hack you mentioned above. It appears that it should work based on a codepen trial with straight HTML/CSS. However, when I try and add it to the hostStyles object, it appears to be stripping the content: '' declaration out. This might be desirable behavior in other contexts, but it appears to break the fix. I'll dig into the way that styles is treated when I get a development env setup.

[JustSlone]

Hmm, yeah we're working on getting setup with GitHub Discussions for more open ended questions.

As for the repo, yeah things are moving around. Best way to find your way around the components is to start here and follow the imports: https://github.com/microsoft/fluentui/tree/master/packages/react/src you'll find most packages map to the react-internal package, but some (and more over time) will map to their own package like react-button.

Other than packages moving around, this is still the right instructions for dev env setup: https://github.com/microsoft/fluentui/wiki/Setup

and thanks again for digging in!!

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.