dropdown with multi select is cutting long text and not displaying tooltip with full text

[orbengigi]

Bug Report

• Package version(s): 6.18.2
• Browser and OS versions: Chrome 67.0.3396.87, Windows 10

Describe the issue:

Creating a dropdown with multi select, and setting some of the options with long text causes to display cut text with no tooltip

Actual behavior:

Expected behavior:

dropdown should display the prefix of the long text with "..." suffix, and display full text on hover inside tooltip

If applicable, please provide a codepen repro:

The bug of the non showing tooltip also happens in single select dropdown in this version:
https://codepen.io/anon/pen/KeBeKz - no tooltip in new version
https://codepen.io/lynamemi/pen/wjapep - with tooltip in early version

[micahgodbolt]

Check if this needs a tooltip

[cliffkoh]

Thanks for the bug report and in particular the codepen repros. Dropdown uses Checkbox underneath so it is there that I believe a fix needs to be pursued. I will mark this as being accepted as a bug.

[natalieethell]

Hey thanks for submitting this issue! It looks like the ellipsis on overflow issue is fixed; here's what I'm seeing when I make a tweak to the our Dropdown demo page:

The tooltip issue, on the other hand, seems to be related to the title prop. When a title prop is passed into a single select dropdown option, the tooltip is displayed. This, however, doesn't work for multi select dropdowns. Additionally, as I can see in your CodePen using an earlier version of Fabric, it looks like we used to support tooltips by default without being provided any title prop. So, I think it makes sense to show the tooltip by default for both single and multi select dropdowns.

I just pushed some changes and opened a PR, which you can follow above.