PopoverComponent

This class combines the configuration and rendering a popover that floats around a toggle element. The toggle can be any HTMLElement or a fritz2 component. The popover can be containing a header, a content and a footer. All "areas" are optional and it can contain a simple String, a Flow<String> or a RenderContext as well as a fritz2 component. The placement of the popover is configurable.

The popover has a default close-button, which you can hide or you can use your own custom close-button. The toggle element is marked by an arrow, but you can hide the arrow if you want.

Example usage:

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