Bootstrap Popover btn-group
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="btn-group">
<button class="btn">Sign UP</button>
<button class="btn" data-placement="top" id='loginbtn'>Log In</button>
</div>
<div id="loginform" style="display:none">
CONTENT
</div>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#loginbtn {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #093f6e;
*background-color: #093f6e;
background-image: -moz-linear-gradient(top, #4087ab, #103378);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#103378), to(#0044cc));
background-image: -webkit-linear-gradient(top, #4087ab, #103378);
background-image: -o-linear-gradient(top, #4087ab, #103378);
background-image: linear-gradient(to bottom, #4087ab, #103378);
background-repeat: repeat-x;
border-color: #103378 #103378 #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4087ab', endColorstr='#ff103378', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
JavaScript
$('#loginbtn').mouseover({
html : true,
content: function() {
return $('#loginform').html();
}
});