Pattern

    <.tooltip
  class="tooltip"
  show_arrow={false}
  on_trigger_value_change="tooltip_pattern_trigger_value"
>
  <:trigger :for={user <- @users} value={user.id}>
    {user.first_name}
  </:trigger>
  <:content>
    {@active_user_detail}
  </:content>
</.tooltip>

  

    on_mount({__MODULE__, :assign_users})

def on_mount(:assign_users, _params, _session, socket) do
  users = [
    %{id: "1", first_name: "Alice", full_name: "Alice Johnson"},
    %{id: "2", first_name: "Bob", full_name: "Bob Martinez"},
    %{id: "3", first_name: "Carol", full_name: "Carol Nguyen"}
  ]

  {:cont,
   socket
   |> assign(:users, users)
   |> assign(:active_user_detail, "Hover a first name to show the full name here.")}
end

def mount(_params, _session, socket) do
  {:ok, socket}
end

def handle_event("tooltip_pattern_trigger_value", %{"value" => value}, socket) do
  body =
    case Enum.find(socket.assigns.users, &(&1.id == value)) do
      nil -> socket.assigns.active_user_detail
      user -> user.full_name
    end

  {:noreply, assign(socket, :active_user_detail, body)}
end

  

    <ul class="flex flex-col gap-space-sm list-none p-0 m-0 w-full max-w-xl">
  <li :for={user <- @users}>
    <.tooltip
      id={"tooltip-profile-" <> user.id}
      class="tooltip"
      show_arrow={false}
      trigger_tag={:span}
    >
      <:trigger>
        <.navigate to={~p"/admins"} type="navigate" class="link">
          {user.first_name}
        </.navigate>
      </:trigger>
      <:content>
        {user.full_name}
      </:content>
    </.tooltip>
  </li>
</ul>

  

    on_mount({__MODULE__, :assign_users})

def on_mount(:assign_users, _params, _session, socket) do
  users = [
    %{id: "1", first_name: "Alice", full_name: "Alice Johnson"},
    %{id: "2", first_name: "Bob", full_name: "Bob Martinez"},
    %{id: "3", first_name: "Carol", full_name: "Carol Nguyen"}
  ]

  {:cont, assign(socket, :users, users)}
end

def mount(_params, _session, socket) do
  {:ok, socket}
end

  

    <div class="flex flex-col gap-space-sm items-start w-full max-w-xl">
  <.tooltip
    class="tooltip"
    show_arrow={false}
    trigger_tag={:span}
    on_trigger_value_change="tooltip_pattern_link_multi_value"
  >
    <:trigger :for={user <- @users} value={user.id}>
      <.navigate to={~p"/admins"} type="navigate" class="link">
        {user.first_name}
      </.navigate>
    </:trigger>
    <:content>
      {@active_link_tooltip_detail}
    </:content>
  </.tooltip>
</div>

  

    on_mount({__MODULE__, :assign_users})

def on_mount(:assign_users, _params, _session, socket) do
  users = [
    %{id: "1", first_name: "Alice", full_name: "Alice Johnson"},
    %{id: "2", first_name: "Bob", full_name: "Bob Martinez"},
    %{id: "3", first_name: "Carol", full_name: "Carol Nguyen"}
  ]

  {:cont,
   socket
   |> assign(:users, users)
   |> assign(
     :active_link_tooltip_detail,
     "Hover a first name to show the full name here."
   )}
end

def mount(_params, _session, socket) do
  {:ok, socket}
end

def handle_event("tooltip_pattern_link_multi_value", %{"value" => value}, socket) do
  body =
    case Enum.find(socket.assigns.users, &(&1.id == value)) do
      nil -> socket.assigns.active_link_tooltip_detail
      user -> user.full_name
    end

  {:noreply, assign(socket, :active_link_tooltip_detail, body)}
end

  

    <.menu id="tooltip-pattern-menu" class="menu" items={@items}>
  <:trigger>Actions</:trigger>
  <:indicator>
    <.heroicon name="hero-chevron-down" />
  </:indicator>
  <:item :let={item}>
    <%= if item.value == "support" do %>
      <.tooltip
        id="tooltip-pattern-menu-support"
        class="tooltip ui-size-sm"
        trigger_tag={:span}
        show_arrow={false}
      >
        <:trigger focusable={false}>{item.label}</:trigger>
        <:content>Coming soon</:content>
      </.tooltip>
    <% else %>
      {item.label}
    <% end %>
  </:item>
</.menu>

  

    items =
  Corex.Tree.new([
    %{label: "Edit", value: "edit"},
    %{label: "Support", value: "support", disabled: true}
  ])