Skip to content

Instantly share code, notes, and snippets.

@hobbyman

hobbyman/index.html

Created September 14, 2018 22:13
Show Gist options
  • Save hobbyman/0b45feea65478d061a1ca3c2ab53f894 to your computer and use it in GitHub Desktop.
Save hobbyman/0b45feea65478d061a1ca3c2ab53f894 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Bootstrap Popover HTML and Form Content // source http://jsbin.com/xacuwom
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bootstrap Popover HTML and Form Content">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<style id="jsbin-css">
.container {padding:20px;}
.form-control {width:120px;}
.popover {max-width:400px;}
#popover-content-logout > * {
background-color:#ff0000 !important;
}
</style>
</head>
<body>
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<a data-title="test"
data-placement="right"
data-target-selector="#popover-list"
type="button"
href="javascript:;"
class="popover-link"
id="login"><span class="glyphicon glyphicon-list" style="margin:3px 0 0 0"></span></a>
<a data-title="Search"
data-placement="right"
data-target-selector="#popover-search"
type="button"
href="javascript:;"
class="popover-link"
id="logout"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a>
<div id="popover-search" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input class="headerSearch search-query" id="str" name="str" type="text" placeholder="Search..." />
<span class="glyphicon glyphicon-search" style="margin:3px 8px 0 -20px;"></span>
<input class="btn btn-primary btn-xs" id="phSearchButton" type="submit" value="Search" />
</div>
</form>
</div>
<div id="popover-list" class="hide">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script id="jsbin-javascript">
$(document).ready( function() {
//-- https://codepen.io/diqidoq/pen/RRojxQ
//-- https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/
// Popover for the quick search additional fields
$('.popover-link').popover({
html : true,
content: function() {
return $($(this).data('target-selector')).html();
},
title: function(){
return $(this).data('title')+'<span class="close">&times;</span>';
}
}).on('shown.bs.popover', function(e){
var popover = $(this);
$(this).parent().find('div.popover .close').on('click', function(e){
popover.popover('hide');
});
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bootstrap Popover HTML and Form Content">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<\!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<a data-title="test"
data-placement="right"
data-target-selector="#popover-list"
type="button"
href="javascript:;"
class="popover-link"
id="login"><span class="glyphicon glyphicon-list" style="margin:3px 0 0 0"></span></a>
<a data-title="Search"
data-placement="right"
data-target-selector="#popover-search"
type="button"
href="javascript:;"
class="popover-link"
id="logout"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a>
<div id="popover-search" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input class="headerSearch search-query" id="str" name="str" type="text" placeholder="Search..." />
<span class="glyphicon glyphicon-search" style="margin:3px 8px 0 -20px;"></span>
<input class="btn btn-primary btn-xs" id="phSearchButton" type="submit" value="Search" />
</div>
</form>
</div>
<div id="popover-list" class="hide">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"><\/script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"><\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.container {padding:20px;}
.form-control {width:120px;}
.popover {max-width:400px;}
#popover-content-logout > * {
background-color:#ff0000 !important;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready( function() {
//-- https://codepen.io/diqidoq/pen/RRojxQ
//-- https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/
// Popover for the quick search additional fields
$('.popover-link').popover({
html : true,
content: function() {
return $($(this).data('target-selector')).html();
},
title: function(){
return $(this).data('title')+'<span class="close">&times;</span>';
}
}).on('shown.bs.popover', function(e){
var popover = $(this);
$(this).parent().find('div.popover .close').on('click', function(e){
popover.popover('hide');
});
});
});</script></body>
</html>
Raw
jsbin.xacuwom.css
.container {padding:20px;}
.form-control {width:120px;}
.popover {max-width:400px;}
#popover-content-logout > * {
background-color:#ff0000 !important;
}
Raw
jsbin.xacuwom.js
$(document).ready( function() {
//-- https://codepen.io/diqidoq/pen/RRojxQ
//-- https://www.emanueletessore.com/twitter-bootstrap-popover-add-close-button/
// Popover for the quick search additional fields
$('.popover-link').popover({
html : true,
content: function() {
return $($(this).data('target-selector')).html();
},
title: function(){
return $(this).data('title')+'<span class="close">&times;</span>';
}
}).on('shown.bs.popover', function(e){
var popover = $(this);
$(this).parent().find('div.popover .close').on('click', function(e){
popover.popover('hide');
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment