Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/design/tooltip_page.ex
defmodule MoonWeb.Pages.Design.TooltipPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Examples.Design.TooltipExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/tooltip",
name: "Tooltip"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
title="Tooltip"
is_aria_support
is_rtl_support
image="facing/components/tooltip.png"
>
<p>
A means of displaying a description or extra information about an element, usually on hover, but can also be on click or tap.
</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
TooltipExample.Default,
TooltipExample.Positions,
TooltipExample.WithoutArrow,
TooltipExample.WithoutShadow,
TooltipExample.Customizations
]} />
<PropsTable
title="Tooltip props"
data={[
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Message shown in tooltip, see Tooltip.Content"
},
%{
:name => ~c"trigger",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Hover element, see Tooltip.Trigger"
}
]}
/>
<PropsTable
title="Tooltip.Content props"
data={[
%{
:name => ~c"arrow",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Arrow element, see Tooltip.Arrow"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Classes for customization"
},
%{
:name => ~c"position",
:type =>
~c"top-start | top-center | top-end | bottom-start | bottom-center | bottom-end | right | left",
:required => ~c"No",
:default => ~c"top-center",
:description => ~c"Position of the tooltip"
}
]}
/>
<PropsTable
title="Tooltip.Arrow props"
data={[
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Classes for customization"
}
]}
/>
</Page>
"""
end
def component_anatomy do
"""
<Tooltip>
<Tooltip.Trigger>...</Tooltip.Trigger>
<Tooltip.Content>
...
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
"""
end
end