首页 > 解决方案 > Boostrap 4 - 一行和类 table-sm 的表格工具提示位置问题

问题描述

我发现在只有一行且具有 table-sm 类的表中放置工具提示存在问题

<!-- TOOLTIP POSITION OK -->
<div class="table-responsive text-nowrap">
   <table class="table table-striped table-bordered">
      <thead>
        <tr>
           <th>First</th>
           <th>Last</th>
        </tr>
       </thead>
      <tbody>
        <tr>
          <td><span title="Foo tooltip">Foo</span> </td>
          <td><span title="Bar tooltip">Bar</span> </td>
        </tr>
      </tbody>
     </table>
  </div>

  <!-- TOOLTIP POSITION PROBLEM -->
  <div class="table-responsive text-nowrap">
      <table class="table table-striped table-bordered table-sm">
         <thead>
            <tr>
             <th>First</th>
             <th>Last</th>
            </tr>
          </thead>
          <tbody>
            <tr>
             <td><span title="Foo tooltip">Foo</span> </td>
             <td><span title="Bar tooltip">Bar</span> </td>
            </tr>
           </tbody>
         </table>
        </div>

JS

$( document ).tooltip( { selector: '[title]', container : 'body' });

引导层

有谁知道如何解决它?
谢谢

标签: bootstrap-4

解决方案


尝试将boundary选项设置为viewport

引导层


推荐阅读