Increasing scroll height when a tooltip appear - html

Question

I have a table and when hover on certain data of a table column i'm displaying a tool tip. Following image shows it. The issue is when hovering the bottom records, the height of the table won't increase to make room to the tool tip.
The following image shows when hovering data of the top of part of the table. There is no issue with this.
But when hovering bottom part of the table , the position of the tool tip will become incorrect as shown in the following figure (Here i have hovered the last record of the table)
I tried giving much higher hight for the table manually. Then i can get the expected behaviour
I do not want to give the table height manually , i want it to increase height automatically. How can i achieve this target
Table code is as follows
<Table responsive striped borderless hover>
<thead>
<tr id="table_col_names">
<th className="label_type2 pl-lg-5 pl-xs-2 pb-4">Allowed Stations</th>
</tr>
</thead>
<tbody>
{consumers.consumerData && consumers.consumerData.map((item, key) => {
return (
<tr key={key}>
<td className="cell_style pl-lg-5 pl-xs-2">
<OverlayTrigger
placement='bottom'
overlay={
<Tooltip bsPrefix="consumer_tooltip">
{Object.values(this.groupData(item.allowedChargingStations)).map((evc,key) => {
return (
<div>
<p>{evc.groupName}</p>
{evc.stations.map((evcStation, key) => {
return (
<p className="ml-3">
<li>{evcStation.name}</li>
</p>
)
})}
</div>
)
})}
</Tooltip>
}
>
<label className="cp">{item.allowedChargingStations.length} stations</label>
</OverlayTrigger>
</td>
</tr>
)
})}
</tbody>
</Table>
i have used react bootstrap component OverlayTrigger and Tooltip for the tool tip.
tool tip css
.consumer_tooltip{
background: rgba(24, 68, 119, 0.5);
backdrop-filter: blur(10.8731px);
border-radius: 4px;
font-size: 14px;
width: 160px;
padding-left: 10px !important;
padding-top: 20px !important;
font-weight: 600;
margin-left: 64px;
margin-top: 10px;
pointer-events: none;
}
.consumer_tooltip:before{
content: ' ';
height: 0;
position: absolute;
width: 0;
left: 18px;
top:-20px;
border: 10px solid transparent;
border-bottom-color: rgba(24, 68, 119, 0.5);
}