Bootstrap 3.0 Popover Sample

by 2Yootz

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"
   data-content="This is the body of Popover"
   >pop
</a>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac porttitor sapien, id scelerisque eros. Aliquam sagittis, ipsum ac pellentesque vulputate, mauris libero mollis dolor, id egestas neque justo at lorem. Sed finibus pulvinar aliquam. Curabitur sit amet orci mattis, iaculis nisi eget, scelerisque neque. In id tristique mauris. Morbi ac leo fermentum, pretium magna vel, accumsan leo. Pellentesque ullamcorper massa in facilisis tincidunt. In placerat aliquam turpis, fermentum sollicitudin ante facilisis iaculis. Cras molestie iaculis est nec venenatis. Pellentesque scelerisque magna sit amet tellus congue cursus non maximus velit. Pellentesque ac viverra leo, sed vulputate nisl. Donec non erat maximus, suscipit felis nec, lacinia massa.

Cras ut orci quis dui ullamcorper sodales vel at augue. In faucibus orci vitae pharetra sagittis. Nullam tincidunt eleifend fringilla. Curabitur in risus tortor. Aliquam tempor diam vitae velit semper, sed finibus tellus eleifend. Nam gravida id urna at congue. Donec pulvinar nisi at nisl scelerisque semper ut sed mauris. Ut tincidunt porta cursus. Praesent laoreet blandit lorem, sit amet molestie sapien sagittis eget. Integer nisi ex, lacinia id congue vitae, ultricies eget justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque a lectus felis.

Fusce ultricies viverra lectus ac facilisis. Nullam molestie porta ultrices. Integer tincidunt lacus ipsum, ac vestibulum leo gravida ut. In hac habitasse platea dictumst. Integer euismod odio...

CSS

.popover  {
background: tomato!important;
    position:fixed;
}

/*
.popover.bottom .arrow:after {
    border-bottom-color: tomato;
}

*/


.popover.right .arrow {
	display:none;
}

JavaScript

$(function () {
    $('#example').popover();
});


$('#example').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 122 + 'px')
})