"Popovers with favicon from any URL"
Bootstrap 3.1.0 Snippet by daleitch

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Current items in group</h3>
<div class="pull-right">
<button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
</div>
</div>
<table class="table">
<thead>
<tr class="filters">
<th> <p>Price</p>
<button type="button" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<div class="po-markup"> <br>
<a href="http://cnn.com" class="po-link">button</a>
<div class="po-content hidden">
<div class="po-title"> Price </div>
<div class="po-body">
<form class="form-inline" role="form">
<div class="input-group">
<input type="text" class="form-control input-number">
<span class="input-group-addon">GBP</span> </div>
<div class="input-group">
<input type="text" class="form-control input-number">
<span class="input-group-addon">GBP</span> </div>
</form>
</div>
</div>
</div>
</th>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
body{
margin-top:24px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
$('[data-toggle="popover"]').popover()
})
/*
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'
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit
Popovers with favicon from any URL

Questions / Comments: