将鼠标悬停在一个弹出窗口上时如何更改 div 的数据到另一个 jquery

Question

我用数据表创建了一个表，并使用 django 模板获取数据。

在表格的最后一列，我添加了信息图标并在悬停时添加了弹出框。

我在控制台中获取不同的数据。因为弹出内容 div(id=showContent) 我是用 HTML 创建的。

这里是HTML代码：

<div class="col-md-12 grid-margin">
      <div class="card">
        <div class="card-body">
          <div class="table-responsive">
            <table class="table dataTable" id="fuelData">
              <thead class="thead-light">
                <tr>
                    <th>OPCO</th>
                    <th>Country</th>
                    <th>Region</th>
                    <th>Currency</th>
                    <th>Business Segment</th>
                    <th>UOM</th>
                </tr>
              </thead>
              <tbody>
                {% for d in UOM%}
                {% for i in d%}
                    <tr>
                        <td> {{i.opco_name}}</td>
                        <td> {{i.region_id__name}}</td>
                        <td> {{i.region_id__country__name}}</td>
                        <td> {{i.currency_id__name}}</td>
                        <td> {{i.business_segment__name}}</td>
                        <td><i class="fa fa-info-circle" data-toggle="popover"></i>
                          <div id="showContent" style="display: none;" hidden><b>Fuel Unit: </b>{{i.fuel_unit}}, <br/>
                          Weight Unit: {{i.weight_unit}},<br/> Volume Unit: {{i.volume_unit}},<br/> Distance Unit: {{i.distance_unit}}</div>
                        </td>
                    </tr>
               
                {% endfor %}
                {% endfor %}

                
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div> 

我正在通过 javascript 在弹出窗口内容中显示该 div。

这是Javascript代码：

$(document).ready(function(){

  $('[data-toggle="popover"]').popover(
    { trigger: "hover" ,
    placement: 'top',
    title: 'Unit Of Measurements',
    content: $("#showContent").show(),
    
   }
  );
});

但它只显示所有行弹出窗口中的第一行弹出数据。 我想在每个弹出窗口上显示不同的数据。

如何在图标悬停时显示特定的行数据？

提前致谢！