Corex · Elixir Phoenix Framework UI Library

Tooltip

Set open from client bindings, client JS, or a server event.

Set open (Client binding)

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.Tooltip.set_open("tooltip-api-cb", true)} class="button ui-size-sm">Open</.action>
  <.action phx-click={Corex.Tooltip.set_open("tooltip-api-cb", false)} class="button ui-size-sm">Close</.action>
</div>
<.tooltip id="tooltip-api-cb" class="tooltip">
  <:trigger>Hover or focus</:trigger>
  <:content>Tooltip content</:content>
</.tooltip>

Set open (Client JS)

    <div class="flex flex-wrap items-center gap-space">
  <button
    type="button"
    class="button ui-size-sm"
    onclick="document.getElementById('tooltip-api-cjs')?.dispatchEvent(new CustomEvent('corex:tooltip:set-open', {bubbles: false, detail: { open: true } }))"
  >
    Open
  </button>
  <button
    type="button"
    class="button ui-size-sm"
    onclick="document.getElementById('tooltip-api-cjs')?.dispatchEvent(new CustomEvent('corex:tooltip:set-open', {bubbles: false, detail: { open: false } }))"
  >
    Close
  </button>
</div>
<.tooltip id="tooltip-api-cjs" class="tooltip">
  <:trigger>Target</:trigger>
  <:content>Tooltip</:content>
</.tooltip>

    const el = document.getElementById("tooltip-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:tooltip:set-open", { bubbles: false, detail: { open: true } })
);

    const el: HTMLElement | null = document.getElementById("tooltip-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:tooltip:set-open", { bubbles: false, detail: { open: true } })
);

Set open (Server)

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="tooltip_api_open" class="button ui-size-sm">Open</.action>
  <.action phx-click="tooltip_api_close" class="button ui-size-sm">Close</.action>
</div>
<.tooltip id="tooltip-api-srv" class="tooltip">
  <:trigger>Hover or focus</:trigger>
  <:content>Tooltip content</:content>
</.tooltip>

    def handle_event("tooltip_api_open", _params, socket) do
  {:noreply, Corex.Tooltip.set_open(socket, "tooltip-api-srv", true)}
end

def handle_event("tooltip_api_close", _params, socket) do
  {:noreply, Corex.Tooltip.set_open(socket, "tooltip-api-srv", false)}
end