css - Bootstrap: create a table with a dedicated column for tooltip -

i'm thinking create table of content special column tooltip. need create via bootstrap table , link every single row different tooltip (that picture) on upper right of row.

bootstrap solution? how can it?

this example:

im not sure if possible modify size , position of tooltip. see trying think better way of thinking of have image hidden , display when hover on row. here 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 have use bit of jquery.

jquery:

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