diff --git a/docs/app/views/docs/tooltip.rb b/docs/app/views/docs/tooltip.rb index 5189728ba..9a4ec1195 100644 --- a/docs/app/views/docs/tooltip.rb +++ b/docs/app/views/docs/tooltip.rb @@ -24,6 +24,19 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Long content", context: self) do + <<~RUBY + Tooltip do + TooltipTrigger do + Button(variant: :outline) { "Hover me" } + end + TooltipContent do + Text { "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } + end + end + RUBY + end + render Components::ComponentSetup::Tabs.new(component_name: component) render Docs::ComponentsTable.new(component_files(component)) diff --git a/gem/lib/ruby_ui/tooltip/tooltip_content.rb b/gem/lib/ruby_ui/tooltip/tooltip_content.rb index ddeae4b02..ec0e31390 100644 --- a/gem/lib/ruby_ui/tooltip/tooltip_content.rb +++ b/gem/lib/ruby_ui/tooltip/tooltip_content.rb @@ -19,7 +19,7 @@ def default_attrs data: { ruby_ui__tooltip_target: "content" }, - class: "invisible peer-hover:visible peer-focus:visible w-max absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md peer-focus:zoom-in-95 animate-out fade-out-0 zoom-out-95 peer-hover:animate-in peer-focus:animate-in peer-hover:fade-in-0 peer-focus:fade-in-0 peer-hover:zoom-in-95 group-data-[ruby-ui--tooltip-placement-value=bottom]:slide-in-from-top-2 group-data-[ruby-ui--tooltip-placement-value=left]:slide-in-from-right-2 group-data-[ruby-ui--tooltip-placement-value=right]:slide-in-from-left-2 group-data-[ruby-ui--tooltip-placement-value=top]:slide-in-from-bottom-2 delay-500" + class: "invisible peer-hover:visible peer-focus:visible w-fit max-w-[calc(100vw-2rem)] text-balance break-words absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md peer-focus:zoom-in-95 animate-out fade-out-0 zoom-out-95 peer-hover:animate-in peer-focus:animate-in peer-hover:fade-in-0 peer-focus:fade-in-0 peer-hover:zoom-in-95 group-data-[ruby-ui--tooltip-placement-value=bottom]:slide-in-from-top-2 group-data-[ruby-ui--tooltip-placement-value=left]:slide-in-from-right-2 group-data-[ruby-ui--tooltip-placement-value=right]:slide-in-from-left-2 group-data-[ruby-ui--tooltip-placement-value=top]:slide-in-from-bottom-2 delay-500" } end end diff --git a/gem/lib/ruby_ui/tooltip/tooltip_docs.rb b/gem/lib/ruby_ui/tooltip/tooltip_docs.rb index 5189728ba..9a4ec1195 100644 --- a/gem/lib/ruby_ui/tooltip/tooltip_docs.rb +++ b/gem/lib/ruby_ui/tooltip/tooltip_docs.rb @@ -24,6 +24,19 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Long content", context: self) do + <<~RUBY + Tooltip do + TooltipTrigger do + Button(variant: :outline) { "Hover me" } + end + TooltipContent do + Text { "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } + end + end + RUBY + end + render Components::ComponentSetup::Tabs.new(component_name: component) render Docs::ComponentsTable.new(component_files(component)) diff --git a/gem/test/ruby_ui/tooltip_test.rb b/gem/test/ruby_ui/tooltip_test.rb index a3ccb4307..c815bed0d 100644 --- a/gem/test/ruby_ui/tooltip_test.rb +++ b/gem/test/ruby_ui/tooltip_test.rb @@ -17,4 +17,14 @@ def test_render_with_all_items assert_match(/Add to library/, output) end + + def test_tooltip_content_wraps_long_text_within_viewport + output = phlex do + RubyUI.TooltipContent { "Long tooltip content" } + end + + assert_match(/w-fit/, output) + assert_match(/max-w-\[calc\(100vw-2rem\)\]/, output) + assert_match(/break-words/, output) + end end