HxPopover

Bootstrap Popover component.
Rendered as a span wrapper to fully support popovers on disabled elements (see example in Disabled elements in the Bootstrap popover documentation).

Basic Usage

<HxPopover Title="Popover title" Content="And here's some amazing content. It's very engaging. Right?">
	<HxButton Color="ThemeColor.Primary">Click to toggle popover</HxButton>
</HxPopover>

Placement

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

HTML content

Use Html="true" to enable HTML in your content.

HTML Sanitization

By default, the HTML content gets sanitized. To disable sanitization set Sanitize="false".

Dismiss on next click

Use the Trigger="PopoverTrigger.Focus" to dismiss popovers on the user’s next click of a different element than the toggle element.

Programmability

You can use ShowAsync() and HideAsync() methods + OnShown and OnHidden events to program your own interaction.

API

Parameters

Name Type Description
ChildContent RenderFragment Child content to wrap.
Content string Popover content.
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 PopoverPlacement Popover placement. Default is PopoverPlacement.Right.
Sanitize bool Enable or disable the sanitization. If activated HTML content will be sanitized. See the sanitizer section in Bootstrap JavaScript documentation.
Title string Popover title.
Trigger PopoverTrigger Popover trigger(s). Default is PopoverTrigger.Click.
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
HideAsync() Task Hides the component.
ShowAsync() Task Shows the component.
An unhandled error has occurred. Reload 🗙