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).
The popover wrapper gets rendered only if
Title, Content or WrapperCssClass parameters is set.
If all are null or empty, only the ChildContent is rendered.
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.
You can also use the DisableAsync() and EnableAsync() 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. |
| 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.
Default is true. |
| Settings | PopoverSettings |
Set of settings to be applied to the component instance (overrides HxPopover.Defaults, overridden by individual parameters). |
| 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. |
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 | PopoverSettings |
Application-wide defaults for the HxPopover and derived components. |