Current section

Files

Jump to
mishka_chelekom priv components tooltip.eex
Raw

priv/components/tooltip.eex

defmodule <%= @module %> do
@moduledoc """
A Tooltip <%= @module %> module for use in Phoenix applications.
This component allows you to display informative text when the user hovers over or focuses on an element.
It supports various customization options, including position, color themes, and sizes, allowing for
flexible integration within your UI.
## Features
- Customizable tooltip position (top, bottom, left, right).
- Multiple color variants and styles for different contexts.
- Adjustable size and padding to fit design requirements.
- Support for additional CSS classes to further customize appearance.
Use this component to enhance user experience by providing contextual information without cluttering the interface.
"""
use Phoenix.Component
@doc """
The `tooltip` component is used to display additional information when users hover over an element.
It provides a small box with text or content and is positioned around the target
element based on the specified `position`.
## Examples
```elixir
<.tooltip text="This is text" position="bottom">
<button class="p-2 bg-orange-700">
This is Tooltip a long text for bottom tooltip
</button>
</.tooltip>
<.tooltip text="This is text" color="warning" position="left">
<button class="p-2 bg-orange-700">This is Tooltip left</button>
</.tooltip>
<.tooltip text="Delete" color="light" position="left">
<button class="p-2 bg-red-500 text-white">
<.icon name="hero-trash" />
</button>
</.tooltip>
<.tooltip text="This is text" color="dark" position="right">
<button class="p-2 bg-orange-700">This is Tooltip right</button>
</.tooltip>
```
"""
@doc type: :component
attr :id, :string,
default: nil,
doc: "A unique identifier is used to manage state and interaction"
attr :position, :string, default: "top", doc: "Determines the element position"
attr :variant, :string, default: "base", doc: "Determines the style"
attr :color, :string, default: "natural", doc: "Determines color theme"
attr :rounded, :string, default: "", doc: "Determines the border radius"
attr :border, :string, default: "extra_small", doc: "Determines border style"
attr :show_arrow, :boolean, default: true, doc: "Show or hide arrow of popover"
attr :size, :string,
default: "",
doc:
"Determines the overall size of the elements, including padding, font size, and other items"
attr :space, :string, default: "", doc: "Space between items"
attr :font_weight, :string,
default: "font-normal",
doc: "Determines custom class for the font weight"
attr :width, :string, default: "fit", doc: "Determines the element width"
attr :wrapper_width, :string, default: "w-fit", doc: "Determines the parent element width"
attr :padding, :string, default: "small", doc: "Determines padding for items"
attr :class, :string, default: nil, doc: "Custom CSS class for additional styling"
attr :text_position, :string, default: "center", doc: "Determines the element' text position"
attr :text, :string, default: "", doc: "Determines element's text"
attr :rest, :global,
doc:
"Global attributes can define defaults which are merged with attributes provided by the caller"
slot :inner_block, required: false, doc: "Inner block that renders HEEx content"
def tooltip(assigns) do
~H"""
<span class={["relative group", @wrapper_width]}>
{render_slot(@inner_block)}
<span
role="tooltip"
id={@id}
class={[
"absolute z-10 transition-all ease-in-out delay-100 duratio-500 w-full",
"invisible opacity-0 group-hover:visible group-hover:opacity-100",
space_class(@space),
color_variant(@variant, @color),
rounded_size(@rounded),
size_class(@size),
padding_size(@padding),
@variant == "bordered" || (@variant == "base" && border_class(@border)),
position_class(@position),
text_position(@text_position),
width_class(@width),
@font_weight,
@class
]}
{@rest}
>
<span
:if={@show_arrow && @variant != "bordered" && @variant != "base"}
class="block absolute size-[8px] bg-inherit rotate-45 -z-[1] tooltip-arrow"
>
</span>
{@text}
</span>
</span>
"""
end
<%= if is_nil(@rounded) or "extra_small" in @rounded do %>
defp rounded_size("extra_small"), do: "rounded-sm"
<% end %>
<%= if is_nil(@rounded) or "small" in @rounded do %>
defp rounded_size("small"), do: "rounded"
<% end %>
<%= if is_nil(@rounded) or "medium" in @rounded do %>
defp rounded_size("medium"), do: "rounded-md"
<% end %>
<%= if is_nil(@rounded) or "large" in @rounded do %>
defp rounded_size("large"), do: "rounded-lg"
<% end %>
<%= if is_nil(@rounded) or "extra_large" in @rounded do %>
defp rounded_size("extra_large"), do: "rounded-xl"
<% end %>
defp rounded_size(params) when is_binary(params), do: params
defp position_class("top") do
[
"bottom-full left-1/2 -translate-x-1/2 -translate-y-[4px]",
"[&>.tooltip-arrow]:-bottom-[4px] [&>.tooltip-arrow]:-translate-x-1/2 [&>.tooltip-arrow]:left-1/2"
]
end
defp position_class("bottom") do
[
"top-full left-1/2 -translate-x-1/2 translate-y-[4px]",
"[&>.tooltip-arrow]:-top-[4px] [&>.tooltip-arrow]:-translate-x-1/2 [&>.tooltip-arrow]:left-1/2"
]
end
defp position_class("left") do
[
"right-full top-1/2 -translate-y-1/2 -translate-x-[6px]",
"[&>.tooltip-arrow]:-right-[4px] [&>.tooltip-arrow]:translate-y-1/2 [&>.tooltip-arrow]:top-1/3"
]
end
defp position_class("right") do
[
"left-full top-1/2 -translate-y-1/2 translate-x-[6px]",
"[&>.tooltip-arrow]:-left-[4px] [&>.tooltip-arrow]:translate-y-1/2 [&>.tooltip-arrow]:top-1/3"
]
end
defp border_class("extra_small"), do: "border"
defp border_class("small"), do: "border-2"
defp border_class("medium"), do: "border-[3px]"
defp border_class("large"), do: "border-4"
defp border_class("extra_large"), do: "border-[5px]"
defp border_class("none"), do: nil
defp border_class(params) when is_binary(params), do: params
<%= if is_nil(@size) or "extra_small" in @size do %>
defp size_class("extra_small"), do: "text-xs max-w-40"
<% end %>
<%= if is_nil(@size) or "small" in @size do %>
defp size_class("small"), do: "text-sm max-w-44"
<% end %>
<%= if is_nil(@size) or "medium" in @size do %>
defp size_class("medium"), do: "text-base max-w-48"
<% end %>
<%= if is_nil(@size) or "large" in @size do %>
defp size_class("large"), do: "text-lg max-w-28"
<% end %>
<%= if is_nil(@size) or "extra_large" in @size do %>
defp size_class("extra_large"), do: "text-xl max-w-32"
<% end %>
defp size_class(params) when is_binary(params), do: params
defp text_position("left"), do: "text-left"
defp text_position("right"), do: "text-right"
defp text_position("center"), do: "text-center"
defp text_position("justify"), do: "text-justify"
defp text_position("start"), do: "text-start"
defp text_position("end"), do: "text-end"
defp text_position(_), do: text_position("center")
defp width_class("extra_small"), do: "min-w-28"
defp width_class("small"), do: "min-w-32"
defp width_class("medium"), do: "min-w-36"
defp width_class("large"), do: "min-w-40"
defp width_class("extra_large"), do: "min-w-44"
defp width_class("double_large"), do: "min-w-48"
defp width_class("triple_large"), do: "min-w-52"
defp width_class("quadruple_large"), do: "min-w-56"
defp width_class("fit"), do: "min-w-fit"
defp width_class(params) when is_binary(params), do: params
<%= if is_nil(@padding) or "extra_small" in @padding do %>
defp padding_size("extra_small"), do: "p-1"
<% end %>
<%= if is_nil(@padding) or "small" in @padding do %>
defp padding_size("small"), do: "p-2"
<% end %>
<%= if is_nil(@padding) or "medium" in @padding do %>
defp padding_size("medium"), do: "p-3"
<% end %>
<%= if is_nil(@padding) or "large" in @padding do %>
defp padding_size("large"), do: "p-4"
<% end %>
<%= if is_nil(@padding) or "extra_large" in @padding do %>
defp padding_size("extra_large"), do: "p-5"
<% end %>
<%= if is_nil(@padding) or "none" in @padding do %>
defp padding_size("none"), do: "p-0"
<% end %>
defp padding_size(params) when is_binary(params), do: params
<%= if is_nil(@space) or "extra_small" in @space do %>
defp space_class("extra_small"), do: "space-y-2"
<% end %>
<%= if is_nil(@space) or "small" in @space do %>
defp space_class("small"), do: "space-y-3"
<% end %>
<%= if is_nil(@space) or "medium" in @space do %>
defp space_class("medium"), do: "space-y-4"
<% end %>
<%= if is_nil(@space) or "large" in @space do %>
defp space_class("large"), do: "space-y-5"
<% end %>
<%= if is_nil(@space) or "extra_large" in @space do %>
defp space_class("extra_large"), do: "space-y-6"
<% end %>
defp space_class(params) when is_binary(params), do: params
<%= if is_nil(@variant) or "base" in @variant do %>
defp color_variant("base", _) do
[
"bg-white text-[#09090b] border-[#e4e4e7] shadow-sm",
"dark:bg-[#18181B] dark:text-[#FAFAFA] dark:border-[#27272a]"
]
end
<% end %>
<%= if is_nil(@variant) or "default" in @variant do %>
<%= if is_nil(@color) or "white" in @color do %>
defp color_variant("default", "white") do
["bg-white text-black"]
end
<% end %>
<%= if is_nil(@color) or "dark" in @color do %>
defp color_variant("default", "dark") do
["bg-[#282828] text-white"]
end
<% end %>
<%= if is_nil(@color) or "natural" in @color do %>
defp color_variant("default", "natural") do
[
"bg-[#4B4B4B] text-white dark:bg-[#DDDDDD] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "primary" in @color do %>
defp color_variant("default", "primary") do
[
"bg-[#007F8C] text-white dark:bg-[#01B8CA] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "secondary" in @color do %>
defp color_variant("default", "secondary") do
[
"bg-[#266EF1] text-white dark:bg-[#6DAAFB] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "success" in @color do %>
defp color_variant("default", "success") do
[
"bg-[#0E8345] text-white dark:bg-[#06C167] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "warning" in @color do %>
defp color_variant("default", "warning") do
[
"bg-[#CA8D01] text-white dark:bg-[#FDC034] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "danger" in @color do %>
defp color_variant("default", "danger") do
[
"bg-[#DE1135] text-white dark:bg-[#FC7F79] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "info" in @color do %>
defp color_variant("default", "info") do
[
"bg-[#0B84BA] text-white dark:bg-[#3EB7ED] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "misc" in @color do %>
defp color_variant("default", "misc") do
[
"bg-[#8750C5] text-white dark:bg-[#BA83F9] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "dawn" in @color do %>
defp color_variant("default", "dawn") do
[
"bg-[#A86438] text-white dark:bg-[#DB976B] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "silver" in @color do %>
defp color_variant("default", "silver") do
[
"bg-[#868686] text-white dark:bg-[#A6A6A6] dark:text-black"
]
end
<% end %>
<% end %>
<%= if is_nil(@variant) or "shadow" in @variant do %>
<%= if is_nil(@color) or "natural" in @color do %>
defp color_variant("shadow", "natural") do
[
"bg-[#4B4B4B] text-white dark:bg-[#DDDDDD] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(134,134,134,0.5)] shadow-[0px_10px_15px_-3px_rgba(134,134,134,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "primary" in @color do %>
defp color_variant("shadow", "primary") do
[
"bg-[#007F8C] text-white dark:bg-[#01B8CA] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(0,149,164,0.5)] shadow-[0px_10px_15px_-3px_rgba(0,149,164,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "secondary" in @color do %>
defp color_variant("shadow", "secondary") do
[
"bg-[#266EF1] text-white dark:bg-[#6DAAFB] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(6,139,238,0.5)] shadow-[0px_10px_15px_-3px_rgba(6,139,238,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "success" in @color do %>
defp color_variant("shadow", "success") do
[
"bg-[#0E8345] text-white hover:bg-[#166C3B] dark:bg-[#06C167] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(0,154,81,0.5)] shadow-[0px_10px_15px_-3px_rgba(0,154,81,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "warning" in @color do %>
defp color_variant("shadow", "warning") do
[
"bg-[#CA8D01] text-white dark:bg-[#FDC034] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(252,176,1,0.5)] shadow-[0px_10px_15px_-3px_rgba(252,176,1,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "danger" in @color do %>
defp color_variant("shadow", "danger") do
[
"bg-[#DE1135] text-white dark:bg-[#FC7F79] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(248,52,70,0.5)] shadow-[0px_10px_15px_-3px_rgba(248,52,70,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "info" in @color do %>
defp color_variant("shadow", "info") do
[
"bg-[#0B84BA] text-white dark:bg-[#3EB7ED] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(14,165,233,0.5)] shadow-[0px_10px_15px_-3px_rgba(14,165,233,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "misc" in @color do %>
defp color_variant("shadow", "misc") do
[
"bg-[#8750C5] text-white dark:bg-[#BA83F9] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(169,100,247,0.5)] shadow-[0px_10px_15px_-3px_rgba(169,100,247,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "dawn" in @color do %>
defp color_variant("shadow", "dawn") do
[
"bg-[#A86438] text-white dark:bg-[#DB976B] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(210,125,70,0.5)] shadow-[0px_10px_15px_-3px_rgba(210,125,70,0.5)] dark:shadow-none"
]
end
<% end %>
<%= if is_nil(@color) or "silver" in @color do %>
defp color_variant("shadow", "silver") do
[
"bg-[#868686] text-white dark:bg-[#A6A6A6] dark:text-black",
"shadow-[0px_4px_6px_-4px_rgba(134,134,134,0.5)] shadow-[0px_10px_15px_-3px_rgba(134,134,134,0.5)] dark:shadow-none"
]
end
<% end %>
<% end %>
<%= if is_nil(@variant) or "bordered" in @variant do %>
<%= if is_nil(@color) or "white" in @color do %>
defp color_variant("bordered", "white") do
[
"bg-white text-black border-[#DDDDDD]"
]
end
<% end %>
<%= if is_nil(@color) or "dark" in @color do %>
defp color_variant("bordered", "dark") do
[
"bg-[#282828] text-white border-[#727272]"
]
end
<% end %>
<%= if is_nil(@color) or "natural" in @color do %>
defp color_variant("bordered", "natural") do
[
"text-[#282828] border-[#282828] bg-[#F3F3F3]",
"dark:text-[#E8E8E8] dark:border-[#E8E8E8] dark:bg-[#4B4B4B]"
]
end
<% end %>
<%= if is_nil(@color) or "primary" in @color do %>
defp color_variant("bordered", "primary") do
[
"text-[#016974] border-[#016974] bg-[#E2F8FB]",
"dark:text-[#77D5E3] dark:border-[#77D5E3] dark:bg-[#002D33]"
]
end
<% end %>
<%= if is_nil(@color) or "secondary" in @color do %>
defp color_variant("bordered", "secondary") do
[
"text-[#175BCC] border-[#175BCC] bg-[#EFF4FE]",
"dark:text-[#A9C9FF] dark:border-[#A9C9FF] dark:bg-[#002661]"
]
end
<% end %>
<%= if is_nil(@color) or "success" in @color do %>
defp color_variant("bordered", "success") do
[
"text-[#166C3B] border-[#166C3B] bg-[#EAF6ED]",
"dark:text-[#7FD99A] dark:border-[#7FD99A] dark:bg-[#002F14]"
]
end
<% end %>
<%= if is_nil(@color) or "warning" in @color do %>
defp color_variant("bordered", "warning") do
[
"text-[#976A01] border-[#976A01] bg-[#FFF7E6]",
"dark:text-[#FDD067] dark:border-[#FDD067] dark:bg-[#322300]"
]
end
<% end %>
<%= if is_nil(@color) or "danger" in @color do %>
defp color_variant("bordered", "danger") do
[
"text-[#BB032A] border-[#BB032A] bg-[#FFF0EE]",
"dark:text-[#FFB2AB] dark:border-[#FFB2AB] dark:bg-[#520810]"
]
end
<% end %>
<%= if is_nil(@color) or "info" in @color do %>
defp color_variant("bordered", "info") do
[
"text-[#0B84BA] border-[#0B84BA] bg-[#E7F6FD]",
"dark:text-[#6EC9F2] dark:border-[#6EC9F2] dark:bg-[#03212F]"
]
end
<% end %>
<%= if is_nil(@color) or "misc" in @color do %>
defp color_variant("bordered", "misc") do
[
"text-[#653C94] border-[#653C94] bg-[#F6F0FE]",
"dark:text-[#CBA2FA] dark:border-[#CBA2FA] dark:bg-[#221431]"
]
end
<% end %>
<%= if is_nil(@color) or "dawn" in @color do %>
defp color_variant("bordered", "dawn") do
[
"text-[#7E4B2A] border-[#7E4B2A] bg-[#FBF2ED]",
"dark:text-[#E4B190] dark:border-[#E4B190] dark:bg-[#2A190E]"
]
end
<% end %>
<%= if is_nil(@color) or "silver" in @color do %>
defp color_variant("bordered", "silver") do
[
"text-[#727272] border-[#727272] bg-[#F3F3F3]",
"dark:text-[#BBBBBB] dark:border-[#BBBBBB] dark:bg-[#4B4B4B]"
]
end
<% end %>
<% end %>
<%= if is_nil(@variant) or "gradient" in @variant do %>
<%= if is_nil(@color) or "natural" in @color do %>
defp color_variant("gradient", "natural") do
[
"bg-gradient-to-br from-[#282828] to-[#727272] text-white",
"dark:from-[#A6A6A6] dark:to-[#FFFFFF] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "primary" in @color do %>
defp color_variant("gradient", "primary") do
[
"bg-gradient-to-br from-[#016974] to-[#01B8CA] text-white",
"dark:from-[#01B8CA] dark:to-[#B0E7EF] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "secondary" in @color do %>
defp color_variant("gradient", "secondary") do
[
"bg-gradient-to-br from-[#175BCC] to-[#6DAAFB] text-white",
"dark:from-[#6DAAFB] dark:to-[#CDDEFF] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "success" in @color do %>
defp color_variant("gradient", "success") do
[
"bg-gradient-to-br from-[#166C3B] to-[#06C167] text-white",
"dark:from-[#06C167] dark:to-[#B1EAC2] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "warning" in @color do %>
defp color_variant("gradient", "warning") do
[
"bg-gradient-to-br from-[#976A01] to-[#FDC034] text-white",
"dark:from-[#FDC034] dark:to-[#FEDF99] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "danger" in @color do %>
defp color_variant("gradient", "danger") do
[
"bg-gradient-to-br from-[#BB032A] to-[#FC7F79] text-white",
"dark:from-[#FC7F79] dark:to-[#FFD2CD] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "info" in @color do %>
defp color_variant("gradient", "info") do
[
"bg-gradient-to-br from-[#08638C] to-[#3EB7ED] text-white",
"dark:from-[#3EB7ED] dark:to-[#9FDBF6] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "misc" in @color do %>
defp color_variant("gradient", "misc") do
[
"bg-gradient-to-br from-[#653C94] to-[#BA83F9] text-white",
"dark:from-[#BA83F9] dark:to-[#DDC1FC] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "dawn" in @color do %>
defp color_variant("gradient", "dawn") do
[
"bg-gradient-to-br from-[#7E4B2A] to-[#DB976B] text-white",
"dark:from-[#DB976B] dark:to-[#EDCBB5] dark:text-black"
]
end
<% end %>
<%= if is_nil(@color) or "silver" in @color do %>
defp color_variant("gradient", "silver") do
[
"bg-gradient-to-br from-[#5E5E5E] to-[#A6A6A6] text-white",
"dark:from-[#868686] dark:to-[#BBBBBB] dark:text-black"
]
end
<% end %>
<% end %>
defp color_variant(params,_) when is_binary(params), do: params
end