Phlex Components
x
1
2
3
4
5
6
7
<div>
  <div data-controller="popover" data-popover-options-value="{}">
    <div data-popover-target="trigger" class="inline-block"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path></svg></button></div>
    <template data-popover-target="content">
      <div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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">Add to library</div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
render(TestView.new) do
  Tooltip do
    TooltipTrigger do
      Button(variant: :outline, icon: true) do
        plain(ActionController::Base.helpers.lucide_icon("bookmark", class: "w-4 h-4"))
      end
    end
    TooltipContent { plain("Add to library") }
  end
end

Default TooltipPreview

No params configured.