36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
@* 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();
|
|
}
|
|
}
|