HxTooltip #

Bootstrap Tooltip component, activates on hover.
Rendered as a span wrapper to fully support tooltips on disabled elements (see example in Disabled elements in the Bootstrap tooltip documentation).

Basic usage #

<HxTooltip Text="Tooltip on top">
	<HxButton Color="ThemeColor.Secondary" Text="Tooltip on top (default)" />
</HxTooltip>

HxButton support #

The tooltip support is also built-in in the HxButton component via the Tooltip parameter.

<HxButton Text="Button with a tooltip"
		  Tooltip="This is a tooltip text."
		  Color="ThemeColor.Primary" />

Placement #

You can change the placement of the tooltip with the Placement parameter:

HTML content #

Use Html="true" to enable HTML in the tooltip.

Programmability #

You can use the ShowAsync() and HideAsync() methods, as well as the OnShown and OnHidden events, to program your own interaction.

You can also use the DisableAsync() and EnableAsync() methods to control the popover behavior.

API #

Parameters #

Name Type Description
Animation bool? Apply a CSS fade transition to the tooltip (enable/disable).
Default is true.
ChildContent RenderFragment Child content to wrap.
Container string Appends the tooltip/popover to a specific element. Default is body.
CssClass string Custom CSS class to add.
Html bool Allows you to insert HTML. If false, innerText property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
Offset ValueTuple<int, int>? Offset of the component relative to its target (ChildContent).
Placement TooltipPlacement Tooltip placement. The default is TooltipPlacement.Top.
Sanitize bool Enable or disable the sanitization. If activated HTML content will be sanitized. See the sanitizer section in Bootstrap JavaScript documentation. Default is true.
Settings TooltipSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
Text string Tooltip text.
Trigger TooltipTrigger Tooltip trigger(s). The default is TooltipTrigger.Hover | TooltipTrigger.Focus.
WrapperCssClass string Custom CSS class to render with the span wrapper of the child-content.

Other properties #

Name Type Description
JSRuntime IJSRuntime

Event callbacks #

Name Type Description
OnHidden EventCallback Fired when the content has finished being hidden from the user and CSS transitions have completed.
OnShown EventCallback Fired when the content has been made visible to the user and CSS transitions have completed.

Methods #

Method Returns Description
DisableAsync() Task Removes the ability for the component to be shown.
It will only be able to be shown if it is re-enabled.
EnableAsync() Task Gives the component the ability to be shown.
The component is enabled by default (i.e. this method is not necessary to be called if the component has not been disabled).
HideAsync() Task Hides the component.
ShowAsync() Task Shows the component.

Static properties #

Property Type Description
Defaults TooltipSettings Application-wide defaults for the HxTooltip and derived components.
An unhandled error has occurred. Reload 🗙