Byo_toplayer.PopoverPopovers are a more powerful version of tooltips:
content has access to a local_ graph, so they can have internal state.content is only active while shown, so it can use on_activate and on_deactivate lifecycle hooks.val create :
?attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
?close_on_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
?close_on_right_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
?close_on_esc:bool Bonsai_web.Bonsai.t ->
?position:Position.t Bonsai_web.Bonsai.t ->
?alignment:Alignment.t Bonsai_web.Bonsai.t ->
?offset:Offset.t Bonsai_web.Bonsai.t ->
?match_anchor_side_length:Match_anchor_side.t option Bonsai_web.Bonsai.t ->
?overflow_auto_wrapper:bool Bonsai_web.Bonsai.t ->
?focus_on_open:bool Bonsai_web.Bonsai.t ->
?arrow:Bonsai_web.Vdom.Node.t option Bonsai_web.Bonsai.t ->
content:
(close:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Attr.t Bonsai_web.Bonsai.t * Controls.tIf close_on_click_outside (default Yes), clicks outside of a popover or its DOM descendants will close the popover and any descendant popovers.
close_on_right_click_outside (default No) behaves similarly. If your popover is acting as a menu, you probably want to set this to Yes.
If close_on_esc (default true), pressing escape will close the focused popover and its descendants, and the event will not propagate. If focus is not on any popover, all popovers with close_on_esc will close.
If focus_on_open (default false) is set to true, the popover root will be focused whenever it opens, unless some element was focused on_activate, or has the HTML autofocus attribute.
position defaults to Auto alignment defaults to Center
If match_anchor_side_length is set to true, the popover's main axis (width if position is Top/Bottom, height if position is Left/Right) will be set to have a length equal to the corresponding axis of the anchor. This is particularly useful for dropdowns and typeaheads.
If overflow_auto_wrapper (default: false), the popover's contents will be wrapped in a div with overflow: auto.
If you want to run some unit Effect.t on close, you can make an on_deactivate lifecycle hook inside of content.
Returns an "anchoring" Vdom.Attr.t, as well as controls for opening/closing the popover.
val create_css :
attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
?close_on_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
?close_on_right_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
?close_on_esc:bool Bonsai_web.Bonsai.t ->
?focus_on_open:bool Bonsai_web.Bonsai.t ->
content:
(close:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
Bonsai_web.Bonsai.graph @ local ->
Controls.tcreate_css doesn't use auto-positioning: these popovers will appear in the top left corner of the viewport by default. Callers typically position these via top and left CSS rules.
attrs are required to force you to provide some positioning via css.
val create_virtual :
?attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
?close_on_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
?close_on_right_click_outside:Close_on_click_outside.t Bonsai_web.Bonsai.t ->
?close_on_esc:bool Bonsai_web.Bonsai.t ->
?position:Position.t Bonsai_web.Bonsai.t ->
?alignment:Alignment.t Bonsai_web.Bonsai.t ->
?offset:Offset.t Bonsai_web.Bonsai.t ->
?match_anchor_side_length:Match_anchor_side.t option Bonsai_web.Bonsai.t ->
?overflow_auto_wrapper:bool Bonsai_web.Bonsai.t ->
?focus_on_open:bool Bonsai_web.Bonsai.t ->
?arrow:Bonsai_web.Vdom.Node.t option Bonsai_web.Bonsai.t ->
content:
(close:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
Anchor.t Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Controls.tLike create, but uses a virtual anchor (e.g. a bounding box or a coordinate pair) for anchoring instead of a real vdom element.
val always_open :
?attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
?autoclose:Autoclose.t Bonsai_web.Bonsai.t ->
?position:Position.t Bonsai_web.Bonsai.t ->
?alignment:Alignment.t Bonsai_web.Bonsai.t ->
?offset:Offset.t Bonsai_web.Bonsai.t ->
?match_anchor_side_length:Match_anchor_side.t option Bonsai_web.Bonsai.t ->
?overflow_auto_wrapper:bool Bonsai_web.Bonsai.t ->
?focus_on_open:bool Bonsai_web.Bonsai.t ->
?arrow:Bonsai_web.Vdom.Node.t option Bonsai_web.Bonsai.t ->
content:
(Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Attr.t Bonsai_web.Bonsai.tLike Popover.create, but always open when active. Use by computing / storing your own open state, and match%subing on it. For example:
let popover_attr =
match%sub is_open with
| Some input ->
Popover.always_open
~content:(fun graph -> ...)
graph
| None -> Vdom.Attr.empty
in
...Typically, you'll calculate is_open as a function of some other state you own.
They will be stacked in the order opened, so the popover whose is_open input last became true will appear on top.
val always_open_css :
attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
?autoclose:Autoclose.t Bonsai_web.Bonsai.t ->
?focus_on_open:bool Bonsai_web.Bonsai.t ->
content:
(Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
Bonsai_web.Bonsai.graph @ local ->
unitLike always_open, but for create_css.
attrs are required to force you to provide some positioning via css.
val always_open_virtual :
?attrs:Bonsai_web.Vdom.Attr.t list Bonsai_web.Bonsai.t ->
?autoclose:Autoclose.t Bonsai_web.Bonsai.t ->
?position:Position.t Bonsai_web.Bonsai.t ->
?alignment:Alignment.t Bonsai_web.Bonsai.t ->
?offset:Offset.t Bonsai_web.Bonsai.t ->
?match_anchor_side_length:Match_anchor_side.t option Bonsai_web.Bonsai.t ->
?overflow_auto_wrapper:bool Bonsai_web.Bonsai.t ->
?focus_on_open:bool Bonsai_web.Bonsai.t ->
?arrow:Bonsai_web.Vdom.Node.t option Bonsai_web.Bonsai.t ->
content:
(Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.t) ->
Anchor.t Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
unitLike always_open, but for create_virtual.