"Customize Popover"
Bootstrap 3.0.0 Snippet by nimesh049

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.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>
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
.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;
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
// 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');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: