Bootstrap button with tooltip and modal, wrong padding in button group

Question

I have a button-group of 2 buttons, each of them has a tooltip and a modal. Bootstrap suggests to wrap buttons with spans to achieve the management of two "data-bs-toggle" attributes, and so I initially did that.

The functionality is fine, so the tooltip displays and the modal pops up when the button is clicked.

My issue is that doing so, the tooltip doesn't show if the cursor is in the padding of the button, but it only works if it's over the span (in my case the icon)

[

I tried giving the span the "d-block w-100" class but it seems like it's not working.

Here's my code, using bootstrap 5:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>

<div class="btn-group btn-group-lg" role="group">
  <button class='btn btn-lg btn-outline-primary' data-bs-toggle='modal' data-bs-target='#modalExport'>
                <span type="button" class="mgc-export-popup" tabindex="0"
                    data-bs-toggle="tooltip" data-bs-placement="top" title="Export">
                <i class="fa-solid fa-file-export fa-fw fa-lg"></i></span></button>
  <button class='btn btn-lg btn-outline-primary' data-bs-toggle='modal' data-bs-target='#modalImport'>
                <span type="button" class="mgc-import-popup" tabindex="0"
                    data-bs-toggle="tooltip" data-bs-placement="top" title="Import">
                <i class="fa-solid fa-file-import fa-fw fa-lg"></i></span></button>
</div>

Answer 1

As suggested by CBroe, the solution was to set the button's padding to 0 and use padding on the span element instead. To make spacing work on span you also need to give it "display:block"

In my use case using bootstrap 5 the final solution was

• class p-0 on the button elements
• classes d-block p-2 px-3 on the span elements to keep the original proportions

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />


<div class="btn-group btn-group-lg" role="group">
  <button class='btn btn-lg btn-outline-primary p-0' data-bs-toggle='modal' data-bs-target='#modalExport'>
                <span class="mgc-export-popup d-block p-2 px-3" tabindex="0"
                    data-bs-toggle="tooltip" data-bs-placement="top" title="Export">
                <i class="fa-solid fa-file-export fa-fw fa-lg"></i></span></button>
  <button class='btn btn-lg btn-outline-primary p-0' data-bs-toggle='modal' data-bs-target='#modalImport'>
                <span class="mgc-import-popup d-block p-2 px-3" tabindex="0"
                    data-bs-toggle="tooltip" data-bs-placement="top" title="Import">
                <i class="fa-solid fa-file-import fa-fw fa-lg"></i></span></button>
</div>