Tooltip · Pattern
Multi-trigger with LiveView, per-row tooltips in a ul, and one tooltip with several link triggers.
Multi-trigger and dynamic content
Hover a first name to show the full name here.
<.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