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).
Title
, Content
or WrapperCssClass
parameters is set.
If all are null
or empty, only the ChildContent
is rendered.
<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>
You can change the placement of the popover with Placement
parameter:
Use Html="true"
to enable HTML in your content.
By default, the HTML content gets sanitized. To disable sanitization set Sanitize="false"
.
Use the Trigger="PopoverTrigger.Focus"
to dismiss popovers on the user’s next click of a different element than the toggle element.
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.
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. |
Name | Type | Description |
---|---|---|
JSRuntime | IJSRuntime |
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. |
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. |
Property | Type | Description |
---|---|---|
Defaults | PopoverSettings |
Application-wide defaults for the HxPopover and derived components. |