Add new Tooltip component with improved button hash API matching Card component pattern by Copilot · Pull Request #37 · Nittarab/daisy_components

Copilot · 2025-08-05T15:08:19Z

This PR implements a comprehensive Tooltip component for the DaisyUI design system with a significantly improved API that follows the same pattern as the Card component's button parameter.

Key Features

Simplified Button Hash API:
The new Tooltip component uses a button: hash parameter that accepts all button configuration in a DRY way, identical to the Card component pattern:

# New simplified API (most common case)
<%= render DaisyUI::Tooltip.new(tip: "Hello world", button: { text: "Hover me" }) %>

# With full button customization
<%= render DaisyUI::Tooltip.new(
  tip: "Custom tooltip",
  button: { text: "Click me", color: :primary, size: :lg, variant: :outline, shape: :wide }
) %>

Consistent with Card Component:
The API matches the Card component's button pattern exactly:

# Card component (for reference)
<%= render DaisyUI::Card.new(
  title: "Card Title",
  description: "Description", 
  button: { text: "Buy Now", color: :primary, justify: :end }
) %>

Complete Feature Set:

Positioning: top, bottom, left, right tooltip positions
Colors: All DaisyUI color variants (primary, secondary, accent, neutral, info, success, warning, error)
Force open: For demos and testing with force_open: true
Responsive display: Show tooltips only on specific screen sizes (lg:tooltip pattern)
Backward compatibility: Custom content still supported via block syntax

Implementation

Component located at app/components/daisy_ui/tooltip.rb following namespace collapsing patterns
Uses same implementation pattern as Card component's setup_button method with symbolize_keys
Comprehensive preview file with playground and examples showcasing the new button hash API
Full test coverage using PreviewTestConcern pattern
Updated Lookbook configuration to include "Feedback" navigation group

The improved API eliminates verbose individual parameters while maintaining full flexibility and follows established patterns in the codebase.

Fixes #36.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Nittarab · 2025-08-06T11:33:01Z

@copilot I have merged on main a way to run ./bin/setup and get the env locally working in a easy way. Rebase this PR in main and discard all the changes that are not related to this PR, like the /vendor and the git ignore

…#40) This PR introduces a comprehensive `./bin/setup` script that automates the entire development environment setup process, making onboarding seamless across different operating systems and CPU architectures, while streamlining the project documentation. ## What's New ### `./bin/setup` Script The new setup script handles complete environment configuration: - **Cross-Platform Support**: Automatically detects OS (Linux/macOS) and CPU architecture (x86_64/aarch64/arm64) - **mise Installation**: Installs [mise](https://github.com/jdx/mise) using the official installation method if not already present - **Ruby Management**: Installs latest Ruby version via mise (leveraging `ruby latest` in .tool-versions) - **Dependency Management**: Installs Bundler and runs `bundle install` at repository root - **Dummy App Support**: Checks for and handles `test/dummy/Gemfile` if present - **Clear Logging**: Color-coded output with comprehensive error handling and progress reporting ### `.tool-versions` Configuration Uses `ruby latest` to ensure the most recent Ruby version is installed, leveraging mise's built-in support for latest version resolution instead of hardcoding specific versions. ### Streamlined Documentation - **Simplified README**: Removed manual setup instructions in favor of the automated script - **Enhanced Copilot Guidelines**: Added dedicated environment setup section for AI-assisted development - **Consistent Messaging**: Updated all references to use "latest Ruby version" instead of hardcoded versions ## Usage New contributors can now get up and running with a single command: ```bash $ ./bin/setup ``` The script provides clear feedback at each step: ``` ========================================= DaisyComponents Environment Setup ========================================= [INFO] Detecting platform... [SUCCESS] Detected platform: linux-x64 [INFO] Installing mise... [SUCCESS] mise installed successfully [INFO] Installing Ruby via mise... [SUCCESS] Ruby installed successfully: ruby (latest version) ... ``` ## Benefits - **Always Current**: Automatically installs the latest Ruby version without manual updates - **Cross-Architecture**: Works seamlessly on x86_64 and ARM64 (Apple Silicon) machines - **Error Resilient**: Comprehensive error handling with clear messaging - **Idempotent**: Safe to run multiple times - skips already installed components - **Simplified Onboarding**: Single command setup eliminates configuration complexity - **Future-Proof**: Easily extensible for additional setup requirements This eliminates the common "works on my machine" issues and significantly reduces the barrier to entry for new contributors while ensuring everyone uses the latest Ruby version.  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

…files and .gitignore changes Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot · 2025-08-06T11:43:13Z

@copilot I have merged on main a way to run ./bin/setup and get the env locally working in a easy way. Rebase this PR in main and discard all the changes that are not related to this PR, like the /ve...

I've successfully rebased this PR on the latest main branch and removed all the unrelated changes (vendor/bundle files and .gitignore modifications). The PR now contains only the Tooltip component implementation with clean commit history. Commit: 400fc99

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

mise.run
- Triggering command: curl -fsSL REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Nittarab

@copilot improve API desing

Nittarab · 2025-08-06T11:57:20Z

+        render(DaisyUI::Tooltip.new(
+                 tip: tip,
+                 position: position,
+                 color: color, 
+                 force_open: force_open,
+                 responsive: responsive,
+                 class: classes
+               )) do
+          DaisyUI::Button.new(text: button_text, color: button_color).render_in(view_context)
+        end
+      end
+
+      # @!endgroup
+
+      def tooltip
+        render(DaisyUI::Tooltip.new(tip: 'hello')) do
+          DaisyUI::Button.new(text: 'Hover me').render_in(view_context)
+        end
+      end
+
+      def top
+        render(DaisyUI::Tooltip.new(position: :top, tip: 'hello', force_open: true)) do
+          DaisyUI::Button.new(text: 'Top').render_in(view_context)
+        end
+      end
+
+      def bottom
+        render(DaisyUI::Tooltip.new(position: :bottom, tip: 'hello', force_open: true)) do
+          DaisyUI::Button.new(text: 'Bottom').render_in(view_context)
+        end
+      end
+
+      def left
+        render(DaisyUI::Tooltip.new(position: :left, tip: 'hello', force_open: true)) do


APIs are a bit shitty to use. The tooltip is always a button in this case, so let's just automate the fact that when I pass a text: param, I create a button, and as in the card component, we can pass all the system arguments to the button if we want to personalize it.

I've improved the Tooltip API design as requested! The component now supports a text: parameter that automatically creates a button, similar to the Card component pattern. Key improvements:

New Simplified API:

# Instead of verbose block syntax: DaisyUI::Tooltip.new(tip: 'hello') do DaisyUI::Button.new(text: 'Hover me').render_in(view_context) end # Now use simple text parameter: DaisyUI::Tooltip.new(tip: 'hello', text: 'Hover me')

Button Customization:

DaisyUI::Tooltip.new( tip: 'Custom tooltip', text: 'Click me', button_color: :primary, button_size: :lg, button_variant: :outline )

All preview examples have been updated to use the new API, and backward compatibility is maintained for custom content blocks. The implementation follows the same pattern as the Card component's button parameter.

Commit: 371cb17

…on creation Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot · 2025-08-06T12:10:10Z

@copilot improve API desing

I've completely redesigned the Tooltip API to be much more user-friendly! The main improvement is adding a text: parameter that automatically creates a button, eliminating the need for verbose block syntax in the most common use case.

Before (verbose):

render(DaisyUI::Tooltip.new(tip: 'hello')) do
  DaisyUI::Button.new(text: 'Hover me').render_in(view_context)
end

After (clean):

render(DaisyUI::Tooltip.new(tip: 'hello', text: 'Hover me'))

Plus added full button customization support (color, size, variant, shape) while maintaining backward compatibility. All examples now use the simplified API.

Commit: 371cb17

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

mise.run
- Triggering command: curl -fsSL REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Nittarab · 2025-08-06T12:49:14Z

@copilot no the button API need to be similar to the card:

   render DaisyUI::Card.new(
          title: 'Card Title',
          description: 'A card component has a figure, a body part, and inside body there are title and actions parts',
          button: { text: 'Buy Now', color: :primary, justify: :end },
          variant: :bordered,
          class: 'w-96'
        )
      ```
      
      WE can pass all the attributes to the button in a DRY way check the card componnet implementation and copy it

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot · 2025-08-06T12:57:07Z

@copilot no the button API need to be similar to the card:

...

I've updated the Tooltip API to match the Card component's button pattern exactly as requested! The component now uses a single button: hash parameter that accepts all button configuration in a DRY way.

New API:

DaisyUI::Tooltip.new(
  tip: 'Custom tooltip',
  button: { text: 'Click me', color: :primary, size: :lg, variant: :outline }
)

Changes made:

Replaced individual text:, button_color:, button_size:, etc. parameters with single button: hash
Updated all preview examples to use the new API
Updated playground parameters to build the button config hash
Maintained backward compatibility for custom content blocks
Updated component documentation with new examples

This matches the Card component pattern where all button attributes are passed in the button: hash exactly as you specified. Commit: 374aa14

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

mise.run
- Triggering command: curl -fsSL REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Nittarab · 2025-08-06T14:05:30Z

good to take offline from here

Initial plan

434bdac

Copilot AI assigned Copilot and Nittarab Aug 5, 2025

Copilot started work on behalf of Nittarab August 5, 2025 15:08 View session

Copilot AI and others added 2 commits August 5, 2025 15:40

Implement Tooltip component with preview, tests, and fixtures

95325e8

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Complete Tooltip component implementation with working preview and tests

0e9d14f

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add new Tooltip component~~ Add new Tooltip component to DaisyUI feedback components Aug 5, 2025

Copilot AI requested a review from Nittarab August 5, 2025 16:03

Copilot finished work on behalf of Nittarab August 5, 2025 16:03

Copilot started work on behalf of Nittarab August 6, 2025 11:33 View session

Copilot AI and others added 3 commits August 6, 2025 11:42

Initial plan

1fb63f3

Clean up PR by rebasing on main and removing unrelated vendor/bundle …

400fc99

…files and .gitignore changes Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot finished work on behalf of Nittarab August 6, 2025 11:44

Nittarab reviewed Aug 6, 2025

View reviewed changes

Copilot started work on behalf of Nittarab August 6, 2025 11:57 View session

Implement improved Tooltip API with text parameter for automatic butt…

371cb17

…on creation Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot AI changed the title ~~Add new Tooltip component to DaisyUI feedback components~~ Add new Tooltip component with improved API design for automatic button creation Aug 6, 2025

Copilot AI requested a review from Nittarab August 6, 2025 12:11

Copilot finished work on behalf of Nittarab August 6, 2025 12:11

Copilot started work on behalf of Nittarab August 6, 2025 12:49 View session

Refactor Tooltip API to use button hash parameter like Card component

374aa14

Co-authored-by: Nittarab <6181406+Nittarab@users.noreply.github.com>

Copilot AI changed the title ~~Add new Tooltip component with improved API design for automatic button creation~~ Add new Tooltip component with improved button hash API matching Card component pattern Aug 6, 2025

Copilot finished work on behalf of Nittarab August 6, 2025 13:00

Navigation Menu

Add new Tooltip component with improved button hash API matching Card component pattern - #37

Add new Tooltip component with improved button hash API matching Card component pattern#37
Nittarab with Copilot wants to merge 8 commits into
mainfrom
copilot/fix-36

Copilot AI commented Aug 5, 2025 •

edited

Loading

Uh oh!

Nittarab commented Aug 6, 2025

Uh oh!

Copilot AI commented Aug 6, 2025 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Nittarab left a comment

Uh oh!

Nittarab Aug 6, 2025

Uh oh!

Copilot AI Aug 6, 2025

Uh oh!

Copilot AI commented Aug 6, 2025 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Nittarab commented Aug 6, 2025

Uh oh!

Copilot AI commented Aug 6, 2025 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Nittarab commented Aug 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Features

Implementation

Uh oh!

Nittarab commented Aug 6, 2025

Uh oh!

Copilot AI commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Nittarab left a comment

Choose a reason for hiding this comment

Uh oh!

Nittarab Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Nittarab commented Aug 6, 2025

Uh oh!

Copilot AI commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Nittarab commented Aug 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Aug 5, 2025 •

edited

Loading

Copilot AI commented Aug 6, 2025 •

edited

Loading

Copilot AI commented Aug 6, 2025 •

edited

Loading

Copilot AI commented Aug 6, 2025 •

edited

Loading