Bootstrap : 100% height div inside a th with rowspan

Question

I have a table with rowspan="2" on some th. I'd like to display a Bootstrap tooltip when the user puts the mouse anywhere on this th, but there is always some automatic padding, even when I remove the padding. This creates a zone inside the th that doesn't activate the tooltip.

I'm also using 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>

perfect! that would be very much helpful to understand the issue!.... — Prashanth Benny, Dec 22 '16 at 09:48
I think this might help. [link] (http://stackoverflow.com/questions/3542090/how-to-make-div-fill-td-height) — Yonas Hailu, Dec 22 '16 at 10:03

score 0 · Answer 1 · answered Dec 22 '16 at 09:44

That's because your <div> doesn't fill the whole <th> so move your tooltip to the <th>. (See my code changes in UPPERCASE code below). Not to scream just to highlight my changes :) Peace!

PS: added a Lime background colour to show where the boundaries are. Always a good idea to add background colours so you can see what you're doing.

Another cool tip is to put this in your CSS file to show the boundaries.

* {border: 1px solid red}

(only works if you reset the box: 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>

This doesn't work with Bootstrap since the tooltip adds a div to the table, leading all the th to shift (that's why I used a nested div in the first place). — FrancoisBaveye, Dec 22 '16 at 16:20

Bootstrap : 100% height div inside a th with rowspan

1 Answers1