Tooltip with TooltipService and dynamic ChildContent

[aco-mreble]

Is it possible to use the FluentTooltip with dynamic ChildContent together with the TooltipService?
I want to use the TooltipService as I want the tooltip to be shown correctly.
Here is an example, just replace the html content of the default Counter FluentUi Example with this:

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>
<FluentCard Height="60">
    <FluentIcon Id="icon_test" Value="new Icons.Regular.Size24.Add()"/>
    @* if using UseTooltipService="false" the tool tip won't be shown correctly 
    but if using  UseTooltipService="true" the values don't update*@
    <FluentTooltip Anchor="icon_test" >
        The current count is @currentCount
    </FluentTooltip>
</FluentCard>

<p role="status">Current count: <FluentBadge Appearance="Appearance.Neutral">@currentCount</FluentBadge></p>

<FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>

[dvoituron]

The problem is that the TooltipServiceProvider used by UseTooltipService is outside of your page/component.
So, a value updated in your component, will not trigger the TooltipServiceProvider refresh.

To "force" a refresh, you need to update (add/remove) a tooltip in this TooltipServiceProvider.

private void IncrementCount()
{
    currentCount++;

    // Force the TooltipServiceProvider to be refreshed
    var options = new TooltipOptions();
    TooltipService.Add(options);
    TooltipService.Remove(options.Id);
}

To simplify this code, we could add a Refresh method for the next release.

[dvoituron]

I added this PR #1413