Packages
moon
2.87.7
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/customizations.ex
defmodule MoonWeb.Examples.Design.TooltipExample.Customizations do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Tooltip
alias Moon.Design.Button
def render(assigns) do
~F"""
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">Hover Me</Button>
</Tooltip.Trigger>
<Tooltip.Content class="bg-chichi/10">
<Tooltip.Arrow />
Custom background
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">Hover Me</Button>
</Tooltip.Trigger>
<Tooltip.Content class="text-moon-18 text-krillin font-medium">
<Tooltip.Arrow />
Custom font
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">Hover Me</Button>
</Tooltip.Trigger>
<Tooltip.Content class="bg-roshi/10 text-piccolo">
<Tooltip.Arrow />
Custom font & backgound
</Tooltip.Content>
</Tooltip>
"""
end
def code() do
"""
alias Moon.Design.Tooltip
alias Moon.Design.Button
...
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">Hover Me</Button>
</Tooltip.Trigger>
<Tooltip.Content class="bg-chichi/10">
<Tooltip.Arrow />
Custom background
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">Hover Me</Button>
</Tooltip.Trigger>
<Tooltip.Content class="text-moon-18 text-krillin font-medium">
<Tooltip.Arrow />
Custom font
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger>
<Button variant="outline">Hover Me</Button>
</Tooltip.Trigger>
<Tooltip.Content class="bg-roshi/10 text-piccolo">
<Tooltip.Arrow />
Custom font & backgound
</Tooltip.Content>
</Tooltip>
"""
end
end