×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: Javascript
Posted by: Srinivasan Pusuluri
Added: May 12, 2014 12:29 PM
Views: 102
Tags: no tags
  1.  <a href="#"
  2.             data-toggle="popover"
  3.             data-html="true"
  4.             data-content="<div><b>Popover Example</b> 1 - Content</div>"
  5.             title="Popover Example <b>1</b> - Title">Popover Example 1</a>
  6.          
  7.           <br /><br />
  8.            
  9.           <!-- Popover Example 2 - JS -->
  10.           <!-- Popover using JavaScript to set content from hidden div -->
  11.           <a href="#" id="popoverExampleTwo" >Popover Example 2</a>
  12.            
  13.           <!-- Popover 2 hidden content -->
  14.           <div id="popoverExampleTwoHiddenContent" style="display: none">
  15.               <div id="popoverExampleTwoHiddenTitle" style="display: none">
  16.              Popover Example <b>2</b> - Title
  17.           </div>  
  18.              <div><b>Title Hidden Content</b> 2 - Content</div>
  19.           </div>
  20.           <!-- Popover 2 hidden title -->
  21.  
  22. $(function(){
  23.    
  24.     // Enabling Popover Example 1 - HTML (content and title from html tags of element)
  25.     $("[data-toggle=popover]").popover();
  26.  
  27.     // Enabling Popover Example 2 - JS (hidden content and title capturing)
  28.     $("#popoverExampleTwo").popover({
  29.         html : true,
  30.         content: function() {
  31.           return $('#popoverExampleTwoHiddenContent').html();
  32.         },
  33.         title: function() {
  34.           return $('#popoverExampleTwoHiddenTitle').html();
  35.         }
  36.     });
  37.         $('body').on('click', function (e) {
  38.             $('#popoverExampleTwo').each(function () {
  39.                 //the 'is' for buttons that trigger popups
  40.                 //the 'has' for icons within a button that triggers a popup
  41.                 if (!$(this).is(e.target) && $(this).has(e.target).length === 0 &&            
  42.                     $('.popover').has(e.target).length === 0) {
  43.                     $(this).popover('hide');
  44.                 }
  45.             });
  46.         });
  47. });
  48.  
  49.  
  50.  
  51.