<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Boostrap Examples</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1> Customize pop Up Working Code</h1>
<div class="listing-items">
<ul class="list-unstyled installments-list">
<li class="row list-row">
<div class="col-md-4">
<label>
Kristen Glockner
</label>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 total-savings pull-right">
<span class="icon-query"></span>
</div>
<div class="col-md-5 items-details">
<p>KristenGlocjkner@teleworms.us</p>
<span>Gesendet am 07.06.2017</span>
</div>
</li>
<li class="row list-row">
<div class="col-md-4">
<label>
Kristen Glockner
</label>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 total-savings pull-right">
<span class="icon-query"></span>
</div>
<div class="col-md-5 items-details">
<p>KristenGlocjkner@teleworms.us</p>
<span>Gesendet am 07.06.2017</span>
</div>
</li>
<li class="row list-row">
<div class="col-md-4">
<label>
Kristen Glockner
</label>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 total-savings pull-right">
<span class="icon-query"></span>
</div>
<div class="col-md-5 items-details">
<p>KristenGlocjkner@teleworms.us</p>
<span>Gesendet am 07.06.2017</span>
</div>
</li>
</ul>
</div>
<br/>
<div class="query-popup-wrapper hide">
<div class="query-popup">
<button type="button" class="icon icon-cross close-custom-popup"></button>
<p class="tooltip-popup-content">
Savings reflects future installments fees. A service fee is included in each installment bill,except where legally prohibited.A great way to reduce your fees is to pre-pay future installments.No installments fees will be assessed for months that you've prepaid.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
.listing-items{
padding:80px 0px 10px 0;
}
.items-details p{
margin:0;
font-family: Georgia;
color: #333333;
font-size: 14px;
font-weight: 700;
text-align: left;
}
.items-details span{
font-family: Verdana;
color: #333333;
font-size: 13px;
font-weight: 400;
text-align: left;
display:block;
}
.list-row:first-child{
border-top:1px solid #808080;
}
.list-row {
border-bottom: 1px solid #808080;
margin: 0;
padding:25px 0 20px 0;
vertical-align:middle;
}
.icon-query {
background: url('https://cdn3.iconfinder.com/data/icons/freeapplication/png/24x24/Help.png') no-repeat 0 0;
width: 32px;
height: 32px;
display: inline-block;
vertical-align: middle;
margin-left: 6px;
cursor: pointer;
}
.icon-cross {
background: url('https://cdn4.iconfinder.com/data/icons/web-ui-color/128/Close-24.png') no-repeat 0 0;
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
border: none;
border-radius: 100%;
position: absolute;
right: -10px;
top: -10px;
}
.total-savings .icon-close {
background-position: -42px -693px;
width: 24px;
height: 24px;
display: inline-block;
position: absolute;
right: 0;
top: 100%;
}
.query-popup {
position: absolute;
top: -160px !important;
left: -260px !important;
max-width: 285px;
z-index: 1060;
padding: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
line-break: auto;
}
.query-popup .tooltip-popup-content {
padding: 9px 14px;
color: #000;
font-size: 14px;
font-weight: normal;
}
// code to Show the popover on clicking on tooltip Icon.
$(".icon-query").on("click", function (evt) {
console.log("Clicked")
var $currentTarget = $(evt.currentTarget),
$popoverTooltip = $($('.query-popup-wrapper').html());
if ($currentTarget.closest('.total-savings').find('.query-popup').length === 0) {
/* checking if parent list has any tooltips already open*/
$('.installments-list').find('.list-row').each(function (index, item) {
if ($(item).find('.query-popup').length > 0) {
$(item).find('.query-popup').find('.close-custom-popup').off('click');
$(item).find('.query-popup').remove();
}
});
$currentTarget.closest('.total-savings').append($popoverTooltip);
} else {
$currentTarget.closest('.total-savings').find('.close-custom-popup').off('click');
$currentTarget.closest('.total-savings').find('.query-popup').remove();
}
$('.close-custom-popup').on('click', function (evt) {
$(evt.currentTarget).closest('.query-popup').remove();
$(this).off('click');
});
});
