Bootstrap：创建一个 table，其中包含用于工具提示的专用列

Question

我正在考虑创建一个 table 内容，其中包含一个用于工具提示的特殊列。基本上我需要的是通过 Bootstrap a table 和 link 将每一行创建到该行右上角的不同工具提示（即图片）。

Bootstrap 可以解决吗？我该怎么做？

这是一个例子：

Answer 1

我不确定是否可以修改工具提示的大小和位置。我明白你想做什么，但我认为更好的思考方式是实际隐藏图像并在将鼠标悬停在特定行上时显示它。这里有一个codepen。

html:

<div class="col-sm-8">
        <table class="table">
          <tr>
            <th>col1</th>
            <th>col2</th>
          </tr>
          <tr class="row1">
            <td>value1</td>
            <td>value2</td>
          </tr>
          <tr class="row2">
            <td>value3</td>
            <td>value4</td>
          </tr>
        </table>

      </div>
      <div class="col-sm-4">
        <div class="info">
          <h1>Info</h1>
          <div class="info-box">
            <div class="one"><img src="http://petsfans.com/wp-content/uploads/2015/02/dog6.jpg" width="80%" height="auto" alt="" /></div>
            <div class="two"><img src="http://www.funchap.com/wp-content/uploads/2014/05/help-dog-picture.jpg" width="80%" height="auto" alt="" /></div>
          </div>
        </div>
      </div>

css:

.info{
  text-align:center;
}
.info-box{
  width: 70%;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
}
.one, .two{
  display: none;
}

您将不得不使用一点 jquery。

jQuery:

$(document).ready(function(){
    $('.row1').hover(function() {
      $('.one').toggle();
    });

   $('.row2').hover(function() {
      $('.two').toggle();
    });
});

Bootstrap：创建一个 table，其中包含用于工具提示的专用列

Bootstrap: create a table with a dedicated column for tooltip

css

twitter-bootstrap

tooltip