Tooltip · 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-2 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-2 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