Popover Demo
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="container">
<div class="row" style="padding-top: 20px;">
<a href="#" class="btn btn-primary" rel="popover" data-content='
<div id="divpop">
dfgdfg
</div>
' data-placement="bottom">Assign to Projects</a>
</div>
</div>
CSS
body {
padding: 50px;
}
* {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
.popover {
width: 450px;
max-width: 450px;
}
.popover-title {
font-weight: bold;
}
.popover.bottom .arrow {
left: 25%;
}
.arrow<#divpop{
display: none;
}
.popover input[type="text"] {
width: 75%;
color: #0080CF;
}
.popover-content {
width: 440px;
max-width: 440px;
}
.table-responsive {
padding-top: 10px;
}
.table {
width: 418px;
margin-bottom: 0px;
}
.table th,
.table td {
border: 1px solid #ddd;
padding: 15px 0px 15px 8px;
color: #0080CF;
background: #f2f2f2;
}
small {
color: #ADADAD;
}
JavaScript
$('a[rel=popover]').popover({
html: 'true',
placement: 'bottom'
})
$(".go").click(function() {
alert("Handler for .click() called.");
});