feat: add OptionTooltip to/in FluentSelect

[JamesNK]

🙋 Feature Request

FluentSelect has an issue where it is hard to see long content. This becomes a problem when there are multiple long values that start the same. It's impossible to tell them apart.

I think there are a couple of ways this could be improved. One or all of these could be changed.

1. When a FluentSelect has a width set then the popup list is the same width as the control on the screen. Compare that behavior with the standard HTML select where the popup can be larger:

A way to have different widths for each of these things would allow more content to be seen. i.e. the width of the select on the page might be only 500px, but the tooltip width could expand to a larger user defined value if required. In other words, add a property to FluentSelect to specify a max width of the option popup.

---

2. There is still the case that very long content could be added. A fix would be to have a tooltip on FluentOptionby adding a title attribute. There is FluentSelect.OptionText and FluentSelect.OptionValue. A OptionTooltip could be added for specifying a title. If null is returned, then no title is displayed so a tooltip could conditionally only be displayed for long values.

<FluentSelect OptionTooltip="@(c => c.Name.Length > 100 ? c.Name : null)" />

A workaround kind of exists today:

<OptionTemplate Context="option">
    <span title="@option.Name">
        @option.Name
    </span>
</OptionTemplate>

However, the problem with this is the tooltip from this is only on the text, not on the complete FluentOption.
Alternatively, a way to set option attributes, so any attribute could be set on the FluentOption, not just title. Right now, OptionTemplate allows you to set the content of FluentOption, but it doesn't allow you to set attributes on it:

fluentui-blazor/src/Core/Components/List/ListComponentBase.razor

Lines 29 to 37 in 66b38f1

	<FluentOption TOption="TOption"
	Value="@GetOptionValue(item)"
	Selected="@GetOptionSelected(item)"
	Disabled="@(GetOptionDisabled(item) ?? false)"
	OnSelect="@OnSelectCallback(item)"
	aria-selected="@(GetOptionSelected(item) ? "true" : "false")">
	@if (OptionTemplate is not null)
	{
	@OptionTemplate(item)

Something like:

<FluentSelect OptionAdditionalAttributes="@(c => new Dictionary<string, string> { ["title"] = c.Name.Length > 100 ? c.Name : null })" />

🤔 Expected Behavior

See above.

😯 Current Behavior

💁 Possible Solution

See above.

🔦 Context

💻 Examples

[dvoituron]

This is a good idea. I'm working on that

[dvoituron]

See #4147