VelvetKit

Previews

No matching results.

x
1
2
3
4
5
<span class="inline-block" data-controller="ui--tooltip"><span id="ui-tooltip-trigger-ui-tooltip-0914011a" class="" aria-describedby="ui-tooltip-content-ui-tooltip-0914011a" 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">Hover me</button></span>
  <div id="ui-tooltip-content-ui-tooltip-0914011a" 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">This is a tooltip
    <div class="absolute w-2 h-2 bg-foreground rotate-45" data-ui--tooltip-target="arrow"></div>
  </div>
</span>
1
2
3
4
5
6
7
8
render(UI::Tooltip.new) do |tooltip|
  tooltip.with_trigger do
    tag.button("Hover me", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md")
  end
  tooltip.with_content(side: side.to_sym, align: align.to_sym) do
    "This is a tooltip"
  end
end

No notes provided.

Param Description Input

—

—