Custom bootstrap popover

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
   <span>Text and images here</span></div>   
   <span>Text and images here</span></div> 
      <span>Text and images here</span></div> 
         <span>Text and images here</span></div> 
         
    <div ><a href="#" class="tip" rel="popover" data-trigger="click"  data-html="true" 
    data-content="Yadda Yadda.<P><P><P><P>More stuff on another line" 
   data-original-title="Your popover title">
  
   <span style="cursor:pointer;">Text and images here</span></a></div>

CSS

a {
   /* margin: 50px;*/
    /* line-height: 8; */
}

JavaScript

$(function ()
 { $(".tip").popover();
 });
 
  $('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
    $('.popover').each(function(){
        $(this.previousSibling).popover('hide');
    });
  }
});