x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-wrap gap-8 p-8"> <span class="inline-block" data-controller="ui--tooltip"><span id="ui-tooltip-trigger-ui-tooltip-f6008543" class="" aria-describedby="ui-tooltip-content-ui-tooltip-f6008543" data-ui--tooltip-target="trigger" data-action="mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"> <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md">Top</button> </span> <div id="ui-tooltip-content-ui-tooltip-f6008543" class="z-50 rounded-md bg-foreground px-3 py-1.5 text-sm text-background shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="tooltip" data-ui--tooltip-target="content" hidden="hidden" data-side="top" data-align="center"> Tooltip on top <div class="absolute w-2 h-2 bg-foreground rotate-45" data-ui--tooltip-target="arrow"></div> </div> </span> <span class="inline-block" data-controller="ui--tooltip"><span id="ui-tooltip-trigger-ui-tooltip-054cb4ba" class="" aria-describedby="ui-tooltip-content-ui-tooltip-054cb4ba" data-ui--tooltip-target="trigger" data-action="mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"> <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md">Right</button> </span> <div id="ui-tooltip-content-ui-tooltip-054cb4ba" class="z-50 rounded-md bg-foreground px-3 py-1.5 text-sm text-background shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="tooltip" data-ui--tooltip-target="content" hidden="hidden" data-side="right" data-align="center"> Tooltip on right <div class="absolute w-2 h-2 bg-foreground rotate-45" data-ui--tooltip-target="arrow"></div> </div> </span> <span class="inline-block" data-controller="ui--tooltip"><span id="ui-tooltip-trigger-ui-tooltip-cf3a92b2" class="" aria-describedby="ui-tooltip-content-ui-tooltip-cf3a92b2" data-ui--tooltip-target="trigger" data-action="mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"> <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md">Bottom</button> </span> <div id="ui-tooltip-content-ui-tooltip-cf3a92b2" class="z-50 rounded-md bg-foreground px-3 py-1.5 text-sm text-background shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="tooltip" data-ui--tooltip-target="content" hidden="hidden" data-side="bottom" data-align="center"> Tooltip on bottom <div class="absolute w-2 h-2 bg-foreground rotate-45" data-ui--tooltip-target="arrow"></div> </div> </span> <span class="inline-block" data-controller="ui--tooltip"><span id="ui-tooltip-trigger-ui-tooltip-b4498e16" class="" aria-describedby="ui-tooltip-content-ui-tooltip-b4498e16" data-ui--tooltip-target="trigger" data-action="mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"> <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md">Left</button> </span> <div id="ui-tooltip-content-ui-tooltip-b4498e16" class="z-50 rounded-md bg-foreground px-3 py-1.5 text-sm text-background shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="tooltip" data-ui--tooltip-target="content" hidden="hidden" data-side="left" data-align="center"> Tooltip on left <div class="absolute w-2 h-2 bg-foreground rotate-45" data-ui--tooltip-target="arrow"></div> </div> </span></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="flex flex-wrap gap-8 p-8"> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Top", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :top) do %> Tooltip on top <% end %> <% end %> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Right", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :right) do %> Tooltip on right <% end %> <% end %> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Bottom", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :bottom) do %> Tooltip on bottom <% end %> <% end %> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Left", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :left) do %> Tooltip on left <% end %> <% end %></div>No notes provided.
No params configured.