diff --git a/docs/app/views/docs/tooltip.rb b/docs/app/views/docs/tooltip.rb index 5189728b..9a4ec119 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 ddeae4b0..ec0e3139 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 5189728b..9a4ec119 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 a3ccb430..c815bed0 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