Packages
noora
0.3.2
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/tooltip.ex
defmodule Noora.Tooltip do
@moduledoc """
Renders a tooltip component with a trigger, customizable size, title, description, and optional icon.
## Example
```elixir
<.tooltip id="help-tooltip" title="Click to learn more">
<:trigger :let={attrs}>
<button {attrs}>Help</button>
</:trigger>
</.tooltip>
<.tooltip id="info-tooltip" size="large" title="Important Information" description="This feature is currently in beta.">
<:trigger :let={attrs}>
<span {attrs}><.icon name="info" /></span>
</:trigger>
<:icon>
<.icon name="alert-circle" />
</:icon>
</.tooltip>
```
"""
use Phoenix.Component
import Noora.Utils
attr(:id, :string, required: true)
attr(:disabled, :boolean, default: false)
attr(:size, :string, values: ~w(small large), default: "small", doc: "Size of the tooltip")
attr(:title, :string, required: true, doc: "Tooltip title")
attr(:description, :string, doc: "Tooltip description. Only shown when `size` is set to large.")
slot(:trigger, required: true, doc: "Tooltip trigger")
slot(:icon,
doc: "Icon to be rendered inside the tooltip. Only shown when `size` is set to large."
)
slot(:inner_block, doc: "Content to be rendered inside the tooltip")
def tooltip(assigns) do
~H"""
<div
id={@id}
class="noora-tooltip"
phx-hook="NooraTooltip"
data-open-delay="250"
data-close-delay="150"
data-interactive
data-positioning-placement="bottom-start"
>
{render_slot(@trigger, %{"data-part" => "trigger"})}
<div data-part="positioner">
<%= if @size == "small" do %>
<div data-part="content" data-size="small">{@title}</div>
<% end %>
<%= if @size == "large" do %>
<div data-part="content" data-size="large">
<div :if={has_slot_content?(@icon, assigns)} data-part="icon">
{render_slot(@icon)}
</div>
<div data-part="body">
<span data-part="title">{@title}</span>
<span data-part="description">{@description}</span>
</div>
</div>
<% end %>
</div>
</div>
"""
end
end