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).

The tooltip wrapper is rendered only if the Text or WrapperCssClass parameter is set. If both are null or empty, only the ChildContent is rendered.

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" />

You can use the TooltipSettings parameter to customize the tooltip.

Bootstrap's default tooltip trigger is hover focus, which often keeps the tooltip visible after clicking the button since it remains focused. You can change this behavior by adjusting the Trigger parameter.
To update the default trigger, set HxButton.Defaults.TooltipSettings.Trigger = TooltipTrigger.Hover in your application startup.

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 "not set" (which Bootstrap defaults to `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 "not set" (which Bootstrap defaults to `hover` + `focus`).
WrapperCssClass	`string`	Custom CSS class to render with the `span` wrapper of the child-content.

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.