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

default top bottom left right auto

<p>
	<HxTooltip Text="Tooltip">default</HxTooltip>
	<HxTooltip Text="Tooltip" Placement="TooltipPlacement.Top">top</HxTooltip>
	<HxTooltip Text="Tooltip" Placement="TooltipPlacement.Bottom">bottom</HxTooltip>
	<HxTooltip Text="Tooltip" Placement="TooltipPlacement.Left">left</HxTooltip>
	<HxTooltip Text="Tooltip" Placement="TooltipPlacement.Right">right</HxTooltip>
	<HxTooltip Text="Tooltip" Placement="TooltipPlacement.Auto">auto</HxTooltip>
</p>

HxButton support

The tooltip support is also embedded in HxButton component via Tooltip parameter.

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

API

Parameters

Name Type Description
Text string Tooltip text to display above the content.
Placement TooltipPlacement Tooltip placement. Default is TooltipPlacement.Top.
CssClass string Custom CSS class to render with the tooltip.
WrapperCssClass string Custom CSS class to render with the span wrapper of the child-content.
ChildContent RenderFragment Child content to wrap over HxTooltip.
An unhandled error has occurred. Reload 🗙