悬停表格底部数据时Tooltip显示异常，需自动扩展表格高度

I’ve run into this exact issue with React Bootstrap’s Tooltip and Table components before! The problem boils down to how Tooltips are positioned by default: they’re mounted to the <body> element (outside your table) and use absolute positioning, which takes them out of the document flow. That means your table has no idea the Tooltip exists, so it won’t automatically expand its height to accommodate it—especially noticeable on the last few rows.

Here’s how to fix it step by step:

1. Mount the Tooltip inside the table cell #

Instead of letting the Tooltip attach to the <body>, we’ll tell it to mount directly inside the table cell (<td>) that contains the trigger. This way, the cell (and the table) will recognize the Tooltip’s height and expand accordingly.

Modify your OverlayTrigger to include the container prop, pointing to the current <td>:

<td className="cell_style pl-lg-5 pl-xs-2" ref={(el) => this.tdRef = el}>
  <OverlayTrigger 
    placement='bottom' 
    overlay={
      <Tooltip bsPrefix="consumer_tooltip">
        {Object.values(this.groupData(item.allowedChargingStations)).map((evc, key) => {
          return (
            <div key={key}> {/* Added unique key to avoid React warnings */}
              <p>{evc.groupName}</p>
              {evc.stations.map((evcStation, stationKey) => (
                <p className="ml-3" key={stationKey}>
                  <li>{evcStation.name}</li>
                </p>
              ))}
            </div>
          )
        })}
      </Tooltip>
    }
    container={this.tdRef} // Mount Tooltip inside the current td
  >
    <label className="cp">{item.allowedChargingStations.length} stations</label>
  </OverlayTrigger>
</td>

(Note: I added missing key props to your map loops—always include those to avoid React rendering warnings!)

2. Adjust Tooltip CSS for proper positioning #

Your current CSS uses absolute positioning for the Tooltip’s arrow, which works fine, but we need to make sure the Tooltip itself stays in the document flow. Update your .consumer_tooltip styles:

.consumer_tooltip{
  background: rgba(24, 68, 119, 0.5);
  backdrop-filter: blur(10.8731px);
  border-radius: 4px;
  font-size: 14px;
  width: 160px;
  padding: 20px 10px 10px; /* Consolidated padding for cleaner code */
  font-weight: 600;
  margin-left: 64px;
  margin-top: 10px;
  pointer-events: none;
  position: relative; /* Keep Tooltip in the document flow so table recognizes its height */
}
.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);
}

The key change here is position: relative on the Tooltip—this ensures the table cell accounts for its height when rendering.

3. Check for container constraints #

Double-check if your table is wrapped in any parent element with overflow: hidden or a fixed height. If so, remove those styles—they’ll prevent the table from expanding even if the Tooltip is in the document flow.

Why this works #

By mounting the Tooltip inside the table cell, we’re making it part of the table’s DOM hierarchy. When the Tooltip becomes visible, the cell expands to fit its height, which forces the table to grow vertically automatically—no more manual height adjustments needed!

内容的提问来源于stack exchange，提问作者CraZyDroiD