Bootstrap snippet: table and inputs on popover test

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: popover,table



<div class="container"> <div class="col-md-3"> <input name="data[Detail][3][extras_y_recargos]" value="0" class="form-control" type="text" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<table class='table table-recargos table-bordered'> <tr> <td colspan='2'>1,25</td> <td colspan='2'>1,75</td> <td colspan='2'>0,35</td> <td colspan='2'>1,75</td> <td colspan='2'>2,1</td> <td colspan='2'>2,0</td> <td colspan='2'>2,5</td> <td colspan='2'>&nbsp;</td> </tr> <tr> <td colspan='2'>H EXTRA DIURNA</td> <td colspan='2'>H EXTRA NOCTURNA</td> <td colspan='2'>RECARGO NOCTURNO</td> <td colspan='2'>HORA FESTIVA DIURNA</td> <td colspan='2'>HORA FESTIVA NOCTURNA</td> <td colspan='2'>HORA EXTRA FESTIVA DIURNA</td> <td colspan='2'>HORA EXTRA FESTIVA NOCTURNA</td> <td colspan='2'>total</td> </tr> <tr> <td>CANT.</td> <td>VALOR</td> <td>CANT.</td> <td>VALOR</td> <td>CANT.</td> <td>VALOR</td> <td>CANT.</td> <td>VALOR</td> <td>CANT.</td> <td>VALOR</td> <td>CANT.</td> <td>VALOR</td> <td>CANT.</td> <td>VALOR</td> <td colspan='2'>&nbsp;</td> </tr> <tr> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td><input type='text' class='form-control' /></td> <td colspan='2'>&nbsp;</td> </tr> <tr> <td colspan='5'><button class='btn btn-info'>Cerrar</button></td> <td colspan='5'><button class='btn btn-info'>Guar</button></td> <td colspan='5'><button class='btn btn-info'>Aplicar a todos</button></td> </tr> </table>"> </div> </div>
body{margin-top:20px;} .popover { max-width: 800px; } .table-recargos tr td{ font-size:10px; } table .border-td td{ border:1px solid }
$(function () { $('[data-toggle="popover"]').popover({html:true}) })
Dey-Dey

table and inputs on popover test

Dey-Dey
  Feb 27th, 19:33
88 Views