fun RenderContext.popover(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "popover", build: PopoverComponent.() -> Unit = {})

This component enables to render a popover thats floats around a toggle element. The toggle can be a simple HTMLElement or a fritz2 component. The Popover can be containing a header, a section and a footer. All "areas" are optional and it containing a simple String, a flowOf<String> or a HTMLElement as well as a fritz2 component. The placement of the Popover is configurable.

The popover has a default close Button, you can hide it or you can use your own custom Button. The toggle element is marked by an arrow, you can hide the arrow.

popover {
toggle {
icon { fromTheme { arrowForward } }
placement { right }
header(flowOf("Our simple Popover"))
content {
div {
text("My Text in a HTMLTag")

See also



optional CSS class that should be applied to the element


a lambda expression for setting up the component itself. Details in PopoverComponent


the ID of the element


the prefix for the generated CSS class resulting in the form `$prefix-$hash`


a lambda expression for declaring the styling as fritz2's styling DSL