popover in bootstrap

<div class="container">
    <div class="row-fluid span12">
        <span class="popup-marker btn" data-content="content" data-original-title="title">Click for Popover</span>
<p id="cnt" class="hide">CONTENT OF POPOVER</p>
</div>
</div>

var isVisible = false;
var clickedAway = false;

$('.popup-marker').popover({
        html: true,
        trigger: 'manual',
      content: function() {
      return $('#cnt').html();
    }
    }).hover(function(e) {
        $(this).popover('show');
        clickedAway = false
        isVisible = true
        //e.preventDefault()
           // $('.popover').bind('click',function() {
            //    clickedAway = false
                //alert('popover has been clicked!');
           // });
    });

$(document).click(function(e) {
  if(isVisible && clickedAway)
  {
    $('.popup-marker').popover('hide')
    isVisible = clickedAway = false
  }
  else
  {
    clickedAway = true
  }
});

http://getbootstrap.com/javascript/

<a href="#"   data-toggle="popover" data-trigger="click hover" >Popover Example</a>

$(function(){
    $("[data-toggle=popover]").popover({
        html:true,
        content:getPopContent() ,
        title:getPopTitle()      
    });
 
function getPopTitle()
{
   return "<div>title</div>";
}

function getPopContent()
{
   return "<div>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example.</div>";
}
});



<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="top">Popover Example</a>

<hr>

<!-- Popover #2 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</a>



<!-- Content for Popover #1 -->  
<div id="a1" class="hidden">
    <div class="popover-heading">This is the heading for #1</div>
 
    <div class="popover-body">This is the body for #1</div>
</div>
 
<!-- Content for Popover #2 -->
<div id="a2" class="hidden">
    <div class="popover-heading">This is the heading for #2</div>
 
    <div class="popover-body">This is the body for #2<br>
        With <b>html</b> content  
    </div>
</div>  

$(function(){

    $("[data-toggle=popover]").popover({

        html : true,

        content: function() {

          var content = $(this).attr("data-popover-content");

          return $(content).children(".popover-body").html();

        },

        title: function() {

          var title = $(this).attr("data-popover-content");

          return $(title).children(".popover-heading").html();

        }

    });

});

///////////////////////////////////////
var i = 0;
$('a#test').click(function() {

    i += 1;
    $('a#test').popover({
        trigger: 'manual',
        placement: 'right',
        template:  '<div class="custom-popover"><h2 class="popover-title"></h2><div class="popover-content"><div class="popover-inner"></div></div></div>',
        content: function() {
            return 'Count is ' + i;
        },
        title: 'dontcare'
    });

    $('a#test').popover("show");
});/

<a id="test" href="#">Click me</a>

///////////////////////////////////////

<div ng-app="bootstrap" id="example" ng-init="items = ['car', 'truck', 'plane', 'bike']">

    <a href="#" pop-over items="items", title="Mode of transport">Show Pop over</a>

</div>

var bootstrap = angular.module("bootstrap", []);

bootstrap.directive('popOver', function ($compile) {

        var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in items'>{{item}}</li></ul>";

        var getTemplate = function (contentType) {

            var template = '';

            switch (contentType) {

                case 'items':

                    template = itemsTemplate;

                    break;

            }

            return template;

        }

        return {

            restrict: "A",

            transclude: true,

            template: "<span ng-transclude></span>",

            link: function (scope, element, attrs) {

                var popOverContent;

                if (scope.items) {

                    var html = getTemplate("items");

                    popOverContent = $compile(html)(scope);                    

                }

                var options = {

                    content: popOverContent,

                    placement: "bottom",

                    html: true,

                    title: scope.title

                };

                $(element).popover(options);

            },

            scope: {

                items: '=',

                title: '@'

            }

        };

    });

///////////////////////////////////

$(function () {
 
   var $popoverInbox = $('#example').popover({
        title: 'Click Inside',
        placement: 'bottom',        
        template: '<div class="popover-all"><div class="popover-arrow"></div><div class="popover-inner"><h3 class="popover-title">Example</h3><div class="popover-content"><p> Clicks:0 </p></div></div></div>'
    });
 
   var count=0;
    
   $(document).on({
     
      click: function() {
       count += 1;
        var dataPopover = $popoverInbox.data('popover');
 dataPopover.tip().find('.popover-content').html('<p> Clicks:'+count+' </p>');
      }
      
   }, '.popover-all');
 
 
 
});

<body>

 <br/>
 <a href="#" id="example" class="btn large primary" >open popover</a>
 
</body>