create popover using jquery is used to display the little content in a tooltip-style popup box . Popovers are also known as advanced tool tips.
You can Use the tool tip when if your content is short if not use popover which increase the efficiency of the content.
Now in this We make Popover Which have these functionality as given Below:
- Popover will closed when you click outside any where.
- When you click one popover another popover will closed automatically.
- You can pass link in popover.
- One close sign by which user can close the popover.
Now We will start with coding part:
Popover.html
Popover Using Jquery
<!DOCTYPE html>
<html>
<head>
<title>inner outer click</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
.popover {
background-color: #e45;
border-radius: 2px;
}
button {
cursor: pointer;
}
.pop {
left: 86px;
right: 0;
top: 0px;
position: absolute;
width: 300px;
padding: 10px;
}
.popover-header {
padding: .5rem .75rem;
margin-bottom: 0;
font-size: 1rem;
color: inherit;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-top-left-radius: calc(.3rem - 1px);
border-top-right-radius: calc(.3rem - 1px);
}
#alert {
font-size: 25px;
float: right;
margin-top: -8px;
}
.popover-body {
padding: .5rem .75rem;
}
.arrow {
left: calc((.5rem + 1px) * -1);
width: .5rem;
height: 1rem;
margin: .3rem 0;
}
.popover-body p{
color: #fff;
}
.popover .arrow {
position: absolute;
display: block;}
</style>
</head>
<body>
<div id="B1"><button>Button 1</button><div class="popover pop fade bs-popover-right show" style="display: block;">
<h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
<div class="popover-body">
<p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
<p> <a href="#" class="btn new float-right"> Read More </a></p>
</div>
</div>
</div>
<br><br>
<div id="B2"><button>Button 2</button
><div class="popover pop fade bs-popover-right show" style="display: block;">
<h3 class="popover-header">New Popover <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
<div class="popover-body">
<p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
<p> <a href="#" class="btn new float-right"> Read More </a></p>
</div>
</div>
</div>
<br><br>
<div id="B3"><button>Button 3</button><div class="popover pop fade bs-popover-right show" style="display: block;">
<h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
<div class="popover-body">
<p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
<p> <a href="#" class="btn new float-right"> Read More </a></p>
</div>
</div>
</div>
<br><br>
<div id="B4"><button>Button 4</button><div class="popover pop fade bs-popover-right show" style="display: block;">
<h3 class="popover-header">New Popover<a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
<div class="popover-body">
<p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
<p> <a href="#" class="btn new float-right"> Read More </a></p>
</div>
</div>
</div>
</div>
<br><br>
<div id="B5"><button>Button 5</button><div class="popover pop fade bs-popover-right show" style="display: block;">
<h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
<div class="popover-body">
<p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
<p> <a href="#" class="btn new float-right"> Read More </a></p>
</div>
</div>
</div>
<br><br>
<div id="show"></div>
</body>
</html>
We manage The Custom Popover Using Jquery
container = $(".popover");
container.hide();
$('button').click(function() {
var parent = $(this).parent().attr('id');
$('#' + parent + ' .popover').show();
})
$(".pophide").click(function(){
$(".pop").hide();
});
$(document).mouseup(function(e) {
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});