Question

我在某些rowspan="2"上有th的表格。当用户将鼠标放在th上的任何位置时，我想显示一个Bootstrap工具提示，但总有一些自动填充，即使我删除了填充。这会在th内创建一个区域，该区域不会激活工具提示。

我也在使用jQuery tablesorter。

th > div {
  width: 100%;
  height: 100%;
}
.tooltip-th {
  margin: -5px;
  padding: 5px 0;
}
.table > thead > tr > th {
  vertical-align: middle;
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>

<body>
  <table class="table well table-condensed table-bordered table-hover table-striped sorter">
    <thead>
      <tr>
        <th rowspan="2">
          <div data-toggle="tooltip" data-placement="bottom" title="Tooltip test">
            Column title
          </div>
        </th>
        <th>
          Column title 2
        </th>
      </tr>
      <tr>
        <th>
          Column title 3
        </th>
      </tr>
    </thead>
  </table>
</body>

</html>

Answer 1

这是因为您的<div>未填满整个<th>，因此请将工具提示移至<th>。（请参阅下面的大写代码中的代码更改）。不要尖叫只是为了突出我的变化:)和平！

PS：添加了Lime背景颜色以显示边界的位置。总是一个好主意添加背景颜色，这样你就可以看到你在做什么。

另一个很酷的提示是将它放在CSS文件中以显示边界。

* {border: 1px solid red}

（仅在重置方框时有效： https://www.paulirish.com/2012/box-sizing-border-box-ftw/）

th > div {
  width: 100%;
  height: 100%;
}
.tooltip-th {
  margin: -5px;
  padding: 5px 0;
}
.table > thead > tr > th {
  vertical-align: middle;
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>

<body>
  <table class="table well table-condensed table-bordered table-hover table-striped sorter">
    <thead>
      <tr>
        <th rowspan="2" TITLE="PLACE YOUR TOOLTIP HERE.">
          <div STYLE="BACKGROUND-COLOR: LIME;" data-toggle="tooltip" data-placement="bottom" title="not here...">
            Column title
          </div>
        </th>
        <th>
          Column title 2
        </th>
      </tr>
      <tr>
        <th>
          Column title 3
        </th>
      </tr>
    </thead>
  </table>
</body>

</html>

Bootstrap：在行内有100％高度div

1 个答案: