Bonsai_web_ui_toplayer (bonsai_web_components.bonsai_web_components.web_ui_toplayer.Bonsai_web_ui

module Styling = Bonsai_web_ui_toplayer_styling

NOTE: This library is implemented in terms of Byo_toplayer. The implementation in Bonsai_web_ui_toplayer.ml is mainly a wrapper, providing Config.ts, themability, etc.

Toplayer elements will not show up in tests by default, because they are portalled outside of the app root. You should use bonsai_web_ui_toplayer_test as a helper library in your testing.

bonsai_web_ui_toplayer contains pure vdom tooltips, and stateful Bonsai popovers and modals: UI elements that appear in the browser top layer, on top of everything else in your web UI.

The Vdom.Attr.ts produced by these computations will position the popover/modal/etc relative to the DOM node where the attr is attached.

The main difference between popovers and modals is that modals "block" the page content under them. For instance:

Moving your mouse outside of a modal should not trigger `hover` on any elements not in that modal.
Clicking outside of a modal will close only that modal, and click events will not propagate.

All default stylings can be overriden through the for_toplayer methods of the View.Theme.t.

These implementations retain their state when closed, including whether any nested elements are open. You might want to wrap their contents in a Bonsai.with_model_resetter', and use an on_deactivate lifecycle hook to clear state, or a Bonsai.scope_model if the popover/modal is keyed by one of multiple inputs.

Authors of reusable components might also be interested in the byo_toplayer library, which is the foundation for this one.

module Position = Byo_toplayer.Position

module Alignment = Byo_toplayer.Alignment

module Offset = Byo_toplayer.Offset

module Restore_focus_on_close = Byo_toplayer.Restore_focus_on_close

val arrow_helper : 
  attrs:Bonsai_web.Vdom.Attr.t list ->
  arrow_len:[ `Px_float of float ] ->
  unit ->
  Bonsai_web.Vdom.Node.t

A utility for creating tooltip/popover arrows. You probably want the same colors for the arrow and the tooltip / popover. attrs should not include padding or size, since this is calculated from arrow_len. It also should not include positioning, because that's set by toplayer.

module Tooltip : sig ... end

module Match_anchor_side = Byo_toplayer.Match_anchor_side

module Anchor : sig ... end

module Close_on_click_outside : sig ... end

module Autoclose : sig ... end

module Controls : sig ... end

module Popover : sig ... end

Popovers are a more powerful version of tooltips:

module Modal : sig ... end