Нужно показывать div после каждой строки в Bootstrap

Question

Я использую Angular и bootstrap для отображения всплывающей подсказки каждый раз, когда пользователь наводит курсор на одну из кнопок на скриншоте. Моя проблема в том, что в настоящее время всплывающая подсказка выравнивается по вертикали в пределах «стрелки». Вместо этого я хочу, чтобы он был выровнен по вертикали с каждой строкой, поэтому, например, если я наведу курсор мыши на какой-либо элемент из первой строки, всплывающая подсказка должна отображаться в правой части кнопки с текстом ACCESIBILIDAD, и то же самое с другой row.

Другая проблема связана с отзывчивостью, потому что, если на экране, например, MD, вместо трех столбцов у меня будет два, а когда на экране SM, у меня будет один столбец. Поэтому я бы хотел, чтобы одно и то же поведение было независимо от количества столбцов.

Как мне этого добиться? Это возможно только с bootstrap и css? Если нет, то как я могу решить это программно? Спасибо!

Моя разметка:

<div class="row">
    <div class="col-lg-9 col-md-9">
        <div class="row">
            <span style="padding: 0.2rem;" class="col-md-6 col-sm-12 col-lg-4" *ngFor="let beneficio of benefit.controls; let i = index" (mouseover)="showTooltip(benefits[i].description)" (mouseout)="showTooltip('')">
                    <ngx-status-card [title]="benefits[i].name">
                      <i [ngClass]="'nb-lightbulb'"></i>
                    </ngx-status-card>
                  </span>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 align-self-center tooltipbox" *ngIf="benefitTooltip && benefitTooltip != ''">
        <span class="tooltiptext">{{ benefitTooltip }}</span>
    </div>
</div>