[Bug Fix] Constrain Tooltip content width (#384)

* [Bug Fix] Constrain Tooltip content width (#180)

* docs(tooltip): add long content wrap example

Author: djalmaaraujo

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))

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

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))

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