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
27
28
29
30
<div class="flex flex-wrap gap-8 p-8 items-center justify-center"> <span class="inline-block" data-controller="ui--popover"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false" id="ui-popover-trigger-ui-popover-adc6fcc9" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-adc6fcc9" data-ui--popover-target="trigger" data-action="click->ui--popover#toggle">Top</button> <div id="ui-popover-content-ui-popover-adc6fcc9" class="z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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="dialog" aria-modal="false" aria-labelledby="ui-popover-title-ui-popover-adc6fcc9" data-ui--popover-target="content" hidden="hidden" data-side="top" data-align="center" tabindex="-1"> <h3 id="ui-popover-title-ui-popover-adc6fcc9" class="font-semibold leading-none tracking-tight mb-2">Top Position</h3> This popover appears above the trigger. <div class="absolute size-2 rotate-45 bg-popover border-border data-[side=top]:border-r data-[side=top]:border-b data-[side=bottom]:border-l data-[side=bottom]:border-t data-[side=left]:border-t data-[side=left]:border-r data-[side=right]:border-b data-[side=right]:border-l" data-ui--popover-target="arrow" data-side="top"></div> </div> </span> <span class="inline-block" data-controller="ui--popover"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false" id="ui-popover-trigger-ui-popover-dfc8e9ff" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-dfc8e9ff" data-ui--popover-target="trigger" data-action="click->ui--popover#toggle">Right</button> <div id="ui-popover-content-ui-popover-dfc8e9ff" class="z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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="dialog" aria-modal="false" aria-labelledby="ui-popover-title-ui-popover-dfc8e9ff" data-ui--popover-target="content" hidden="hidden" data-side="right" data-align="center" tabindex="-1"> <h3 id="ui-popover-title-ui-popover-dfc8e9ff" class="font-semibold leading-none tracking-tight mb-2">Right Position</h3> This popover appears to the right. <div class="absolute size-2 rotate-45 bg-popover border-border data-[side=top]:border-r data-[side=top]:border-b data-[side=bottom]:border-l data-[side=bottom]:border-t data-[side=left]:border-t data-[side=left]:border-r data-[side=right]:border-b data-[side=right]:border-l" data-ui--popover-target="arrow" data-side="right"></div> </div> </span> <span class="inline-block" data-controller="ui--popover"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false" id="ui-popover-trigger-ui-popover-8ead3ca4" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-8ead3ca4" data-ui--popover-target="trigger" data-action="click->ui--popover#toggle">Bottom</button> <div id="ui-popover-content-ui-popover-8ead3ca4" class="z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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="dialog" aria-modal="false" aria-labelledby="ui-popover-title-ui-popover-8ead3ca4" data-ui--popover-target="content" hidden="hidden" data-side="bottom" data-align="center" tabindex="-1"> <h3 id="ui-popover-title-ui-popover-8ead3ca4" class="font-semibold leading-none tracking-tight mb-2">Bottom Position</h3> This popover appears below the trigger. <div class="absolute size-2 rotate-45 bg-popover border-border data-[side=top]:border-r data-[side=top]:border-b data-[side=bottom]:border-l data-[side=bottom]:border-t data-[side=left]:border-t data-[side=left]:border-r data-[side=right]:border-b data-[side=right]:border-l" data-ui--popover-target="arrow" data-side="bottom"></div> </div> </span> <span class="inline-block" data-controller="ui--popover"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false" id="ui-popover-trigger-ui-popover-5d10a8e8" aria-haspopup="true" aria-expanded="false" aria-controls="ui-popover-content-ui-popover-5d10a8e8" data-ui--popover-target="trigger" data-action="click->ui--popover#toggle">Left</button> <div id="ui-popover-content-ui-popover-5d10a8e8" class="z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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="dialog" aria-modal="false" aria-labelledby="ui-popover-title-ui-popover-5d10a8e8" data-ui--popover-target="content" hidden="hidden" data-side="left" data-align="center" tabindex="-1"> <h3 id="ui-popover-title-ui-popover-5d10a8e8" class="font-semibold leading-none tracking-tight mb-2">Left Position</h3> This popover appears to the left. <div class="absolute size-2 rotate-45 bg-popover border-border data-[side=top]:border-r data-[side=top]:border-b data-[side=bottom]:border-l data-[side=bottom]:border-t data-[side=left]:border-t data-[side=left]:border-r data-[side=right]:border-b data-[side=right]:border-l" data-ui--popover-target="arrow" data-side="left"></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
<div class="flex flex-wrap gap-8 p-8 items-center justify-center"> <%= render(UI::Popover.new) do |popover| %> <% popover.with_trigger { "Top" } %> <% popover.with_content(side: :top) do |content| %> <% content.with_title { "Top Position" } %> This popover appears above the trigger. <% end %> <% end %> <%= render(UI::Popover.new) do |popover| %> <% popover.with_trigger { "Right" } %> <% popover.with_content(side: :right) do |content| %> <% content.with_title { "Right Position" } %> This popover appears to the right. <% end %> <% end %> <%= render(UI::Popover.new) do |popover| %> <% popover.with_trigger { "Bottom" } %> <% popover.with_content(side: :bottom) do |content| %> <% content.with_title { "Bottom Position" } %> This popover appears below the trigger. <% end %> <% end %> <%= render(UI::Popover.new) do |popover| %> <% popover.with_trigger { "Left" } %> <% popover.with_content(side: :left) do |content| %> <% content.with_title { "Left Position" } %> This popover appears to the left. <% end %> <% end %></div>No notes provided.
No params configured.