Packages
moon
2.88.0
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
Current section
Files
Jump to
Current section
Files
lib/moon_web/examples/design/tooltip_example/position.ex
defmodule MoonWeb.Examples.Design.TooltipExample.Positions do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Tooltip
alias Moon.Design.Button
def render(assigns) do
~F"""
{#for placement <- ~w(top-start top-center top-end bottom-start bottom-center bottom-end right left)}
<div class="w-1/3 md:w-1/5 flex justify-center">
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">{placement}</Button>
</Tooltip.Trigger>
<Tooltip.Content position={placement}>
I'm a {placement} tooltip
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
</div>
{/for}
"""
end
def code() do
"""
alias Moon.Design.Tooltip
alias Moon.Design.Button
...
{#for placement <- ~w(top-start top-center top-end bottom-start bottom-center bottom-end right left)}
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">{placement}</Button>
</Tooltip.Trigger>
<Tooltip.Content position={placement}>
I'm a {placement} tooltip
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
{/for}
"""
end
end