Tooltips on disabled buttons in input-groups/btn-groups

Created by: bjCorrosionInstruments

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Recommended use of ngb-tooltip on a disabled button is to add a div around the button. In Bootstrap 4, this would display correctly for an input-group, using an input-group-append div around the button, and adding input-group-text to the button itself.

In Bootstrap 5, input-group-append has been deprecated, with input-group-text now the only option to have items appended to an input-group. Buttons inside input-group-text divs do not display correctly (see example 1). Adding an additional input-group also does not work. Adding a btn-group works, but because there is only one item (the button), the top-left and bottom-left borders still apply a radius (example 2).

There are two workarounds I've found:

add an additional button that is display none - this has a double border in the middle (very faint) add both btn-group and input-group to the original element - this has 2 different bugs - the end border radius disappears on hover. Also the 2 elements wrap when the width of the page is reduced (fixed with flex-nowrap).

Additional workaround as suggested by bastienmoulia:

For your second workaround, you can add the class rounded-end to force the radius of the button on hover. https://getbootstrap.com/docs/5.3/utilities/borders/#radius

Issue was raised on ngb-bootstrap repo here: https://github.com/ng-bootstrap/ng-bootstrap/issues/4448

Reduced test cases

https://stackblitz.com/edit/angular-mpk2kv?file=src/app/tooltip-basic.html

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.3