Bootstrap：创建一个带有工具提示专用列的表

Question

我正在考虑使用工具提示的特殊列创建内容表。 基本上我需要的是通过Bootstrap创建一个表，并将每一行链接到该行右上角的不同工具提示（即图片）。

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();
    });
});