Skip to content

Comments

Fix button group styling when buttons are wrapped in tooltips#2404

Open
joshhanley wants to merge 1 commit intomainfrom
josh/fix-button-group-with-tooltip
Open

Fix button group styling when buttons are wrapped in tooltips#2404
joshhanley wants to merge 1 commit intomainfrom
josh/fix-button-group-with-tooltip

Conversation

@joshhanley
Copy link
Member

@joshhanley joshhanley commented Feb 17, 2026

The Scenario

When a button with a tooltip is placed inside a <flux:button.group> (typically via a <flux:modal.trigger>), the button visually breaks out of the group — the border radius isn't welded together and the borders don't collapse properly, making it appear as a separate disconnected button.

This happens with both the tooltip prop on the button and the <flux:tooltip> component wrapper.

Screenshot 2026-02-17 at 01 50 10PM@2x
<flux:button.group>
    <flux:modal.trigger name="modal-left">
        <flux:button icon="bars-3-bottom-left" tooltip="Left align" />
    </flux:modal.trigger>
    <flux:modal.trigger name="modal-center">
        <flux:button icon="bars-3" tooltip="Center align" />
    </flux:modal.trigger>
    <flux:modal.trigger name="modal-right">
        <flux:button icon="bars-3-bottom-right" tooltip="Right align" />
    </flux:modal.trigger>
</flux:button.group>

The Problem

The button group component uses CSS child selectors to weld buttons together by overriding border-radius and collapsing borders. It handles three nesting depths:

  1. Direct children: [&>[data-flux-group-target]:first-child...] — buttons directly in the group
  2. One level nested: [&>*:first-child>[data-flux-group-target]...] — button inside one wrapper (e.g., a <flux:modal.trigger> with display: contents)
  3. Two levels nested via input: [&>*:first-child>[data-flux-input]>[data-flux-group-target]...] — button inside two wrappers (e.g., combobox)

When a tooltip wraps a button inside a <flux:modal.trigger>, the DOM structure becomes:

button-group > div.contents (modal trigger) > ui-tooltip > button

The <flux:modal.trigger> uses display: contents so it's invisible to layout, but CSS selectors still see it in the DOM tree. The one-level selectors don't match because the button isn't a direct child of the modal trigger — the <ui-tooltip> element sits between them. And the two-level selectors only target [data-flux-input] as the intermediate element, not [data-flux-tooltip].

The Solution

Added targeted [data-flux-tooltip] selectors to both button/group.blade.php and input/group/index.blade.php, mirroring the existing [data-flux-input] pattern for two-level nesting:

[&>*:first-child:not(:last-child)>[data-flux-tooltip]>[data-flux-group-target]]:rounded-e-none

This specifically matches the wrapper > tooltip > button pattern using child combinators (>) at each level, so it won't affect buttons nested deep inside menus, dropdowns, or popovers within the group — avoiding the issue with the previous approach of using descendant selectors.

Screenshot 2026-02-17 at 01 49 28PM@2x

Fixes #2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tooltip causing layout issue inside button group with modal trigger

1 participant