When a BButton or BDropdown with v-b-tooltip is placed as the last element in a BButtonGroup, 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 apply border-radius to the last button in a group:

Before fix:

<div class="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 the vBTooltip directive to automatically detect when an element is inside a button group (using the existing buttonGroupKey injection) and use body placement for tooltips in button groups. This prevents DOM interference while maintaining full tooltip functionality.

After fix:

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

Changes

• Enhanced vBTooltip 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 more Copilot coding agent tips in the docs.