tooltip

It accepts conent of the tooltip as a first argument, which can be either text or DOM node. The second argument is an object with options. It has one required option - target of the tooltip(the HTML node next to which tooltip is shown). The object produced by the function has methods show and close that change visibility of the tooltip. Usually tooltip's visibility is toggled when cursor is over the element, 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 tooltip {%- endraw %} {%- endcall %}

Other tooltip options:

• position: string, position of the tooltip relative to the target. Possible values are "top", "right", "bottom" and "left".

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

To access existing tooltip, rendered with ui.tooltip macro, use getTooltip method available in the JS. This method accepts ID of the tooltip target.

{%- call ui.util.call(show_example) -%} {%- raw %} {% set id = ui.util.id() -%} {% set tooltip_id = ui.util.id() -%} {{ ui.tooltip("I'm the target of tooltip", tooltip="Hello world", attrs={"id": tooltip_id}) }} {%- endraw %} {%- endcall %}