It accepts conent of the popover as a first argument, which can be either text or DOM node. The second required argument is an object with options, that has required element target - the HTML node element next to which popover is shown. The object produced by the function has methods show and close that change visibility of the popover. Usually popover's visibility is toggled after every click on target, so this object is required only when you want to add an additional behavior.

{%- call ui.util.call(show_example) -%} {%- raw %} {% set id = ui.util.id() -%} I'm the target of popover {%- endraw %} {%- endcall %}

Other popover options:

title: title of the popover.
trigger: string with the name of event that trigger popover. Usually it supoorts click, hover and focus.

{%- call ui.util.call(show_example) -%} {%- raw %} {% set id = ui.util.id() -%} I'm the target of popover {%- endraw %} {%- endcall %}

To access existing popover, rendered with ui.popover macro, use getPopover method available in the JS. This method accepts ID of the popover target(not the ID of the popover itself).

{%- call ui.util.call(show_example) -%} {%- raw %} {% set id = ui.util.id() -%}

{% set popover_id = ui.util.id() -%} {%- set popover_target_id = ui.util.id() -%} {{ ui.popover("Content", title="Title", id=popover_id) }} {{ ui.popover_handle("I'm popover target", id=popover_id, attrs={"id": popover_target_id}) }} {%- endraw %} {%- endcall %}