Bootstrap Popovers with favicon from any URL


	<!-- SUBMITTED to Featured: 1:35pm March 22,2014  -->

<div class="container">
  <div class="row">
    <!-- this will center a col 6, and 3 on each side -->
    <div class="col-md-6 col-md-offset-3">
      <img src="https://cdn1.iconfinder.com/data/icons/gpsmapicons/red/gpsmapicons07.png" width="64" class="pull-right" alt="">
      <h1>
      Popovers <small>with  favicon from any URL</small></h1>
      <p>
      How to easily include favicons from any URL and <strong> HTML code </strong> with your popovers.
      </p>

      <div class="po-markup">
      <br>
        <a href="http://cnn.com" class="po-link">cnn.com</a>
        ←  popover with favicon and HTML coded site information.

        <div class="po-content hidden">
          <div class="po-title">
            <img src="http://g.etfv.co/http://www.cnn.com" alt="Google" width="16" height="16">
            CNN News
            </div> <!-- ./po-title -->
            
            <div class="po-body">
              <p>
                  CNN.com is among the world's leaders in online news and information delivery. Staffed <strong>24 hours </strong>, seven days a week by a dedicated staff in CNN's world headquarters in Atlanta, Georgia, and in bureaus worldwide.
              </p>
              
              </div><!-- ./po-body -->
              </div>  <!-- ./po-content -->
              </div><!-- ./po-markup -->
              
              <hr>
              
              <div class="text-info lead">
              <br>
                <p>
                Examples of retrieving favicons:
                </p>
                <img src="http://g.etfv.co/http://www.google.com" alt="Google" width="16" height="16">
                <img src="http://g.etfv.co/http://www.cnn.com" alt="CNN" width="16" height="16">
                <img src="http://g.etfv.co/http://www.ebay.com" alt="eBay" width="16" height="16">
                <img src="http://g.etfv.co/http://www.facebook.com" alt="Facebook" width="16" height="16">
                <img src="http://g.etfv.co/http://abc.com" alt="ABC News" width="16" height="16">
                </div><!-- ./text-info -->

                <hr>

                <a href="http://getfavicon.appspot.com/test/">See 1,000 top visited websites' favicons</a>
                <br>

                <hr>
                <a href="http://validator.w3.org/check?uri=http%3a%2f%2fbootsnipp.com%2fiframe%2f4qDK;ss=1"><span class="glyphicon glyphicon-check" style="color: #339900;"></span><small> HTML</small><sup>5</sup></a>

                </div><!-- ./col-md6 -->
                </div><!-- ./row -->
                </div><!-- ./container -->
	<script type="text/javascript"></script>

    body{
margin-top:24px;    
}

    

	/*

Bootstrap Popover Ref:
http://getbootstrap.com/javascript/#popovers

Favicons Ref:
http://getfavicon.appspot.com/
(https:// links are available)

Popover ref:
Note: the JS is written, so that you can have unlimited number of popovers.
http://wolfslittlestore.be/2013/12/easy-popovers-with-bootstrap/
with:
http://jsfiddle.net/7Kd44/
*/

$(document).ready(function() {

  $('.po-markup > .po-link').popover({
    trigger: 'hover',
    html: true,  // must have if HTML is contained in popover

    // get the title and conent
    title: function() {
      return $(this).parent().find('.po-title').html();
    },
    content: function() {
      return $(this).parent().find('.po-body').html();
    },

    container: 'body',
    placement: 'right'

  });

});