When aBButton orBDropdown withv-b-tooltip is placed as the last element in aBButtonGroup, the right-side border radius disappears, breaking the visual consistency of the button group.

Root Cause

The issue occurs because the tooltip directive inserts a<span> element as the next sibling of the button element. This breaks Bootstrap's CSS:last-child selectors that applyborder-radius to the last button in a group:

Before fix:

<divclass="btn-group"><button>First</button><button>Last with tooltip</button><!-- NOT :last-child ❌ --><span><!-- tooltip container --></span><!-- Now this is :last-child --></div>

Solution

Modified thevBTooltip directive to automatically detect when an element is inside a button group (using the existingbuttonGroupKey injection) and use body placement for tooltips in button groups. This prevents DOM interference while maintaining full tooltip functionality.

After fix:

<divclass="btn-group"><button>First</button><button>Last with tooltip</button><!-- :last-child ✅ --></div><!-- Tooltip rendered in document.body instead -->

Changes

• EnhancedvBTooltip directive to detect button group context
• Automatically apply body placement when inside button groups
• Added comprehensive test coverage for button group scenarios
• Maintains backward compatibility for all existing tooltip usage

Visual Result

All button groups now maintain proper rounded corners regardless of tooltip placement, while tooltips remain fully functional.

Fixes#1911.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn moreCopilot coding agent tips in the docs.