Search code examples
csstwitter-bootstraptooltip

Bootstrap: create a table with a dedicated column for tooltip

i'm thinking about to create a table of content with a special column for a tooltip. Basically what i need is to create via Bootstrap a table and to link every single row to a different tooltip (that as to be a picture) on the upper right of the row.

Bootstrap could be a solution? How can i do it?

This is an example:

enter image description here

Solution

  • Im not sure if it is possible to modify the size and position of the tooltip. I see what you are trying to do but I think a better way of thinking of it is to actually have the image hidden and display it when you hover over a certain row. Here is a 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;
}

    You will have to use a bit of jquery.

    jQuery: 

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

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