Module Byo_toplayer.Popover

Popovers are a more powerful version of tooltips:

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.t

If 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.t

create_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.t

Like create, but uses a virtual anchor (e.g. a bounding box or a coordinate pair) for anchoring instead of a real vdom element.

Like 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 -> unit

Like 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 -> unit

Like always_open, but for create_virtual.