@* Clickable "?" button that reveals an explanatory tooltip. Use to demystify SharePoint
   jargon for users with limited SharePoint knowledge. Pass the explanation via Text
   (typically a localized string: <HelpTip Text="@T["some.help"]" />). Click toggles the
   bubble; it closes on a second click or when focus leaves the button. *@

@if (!string.IsNullOrWhiteSpace(Text))
{
    <span class="help-tip @(Wide ? "help-tip-wide" : "") @(_open ? "open" : "")">
        <button type="button" class="help-tip-mark" @onclick="Toggle" @onclick:stopPropagation="true"
                @onclick:preventDefault="true" @onfocusout="Close"
                aria-label="@Text" aria-expanded="@_open" title="@Text">?</button>
        <span class="help-tip-bubble" role="tooltip">@Text</span>
    </span>
}

@code {
    /// <summary>The explanation shown inside the tooltip bubble.</summary>
    [Parameter] public string? Text { get; set; }

    /// <summary>Use a wider bubble for longer explanations.</summary>
    [Parameter] public bool Wide { get; set; }

    private bool _open;

    private void Toggle() => _open = !_open;

    // Delay the close so a click that moves focus off the button still toggles cleanly,
    // and so the bubble doesn't vanish before a click on it registers.
    private async Task Close()
    {
        await Task.Delay(150);
        _open = false;
        StateHasChanged();
    }
}