Bootstrap Popover
Popover is similar to tooltips , a small box appear with additional information.You need to initialized Popover by jqery.
Example
Bootstrap Example
A Popover can be position Top ,bottom,left,right position.
Bootstrap Example
Closing Popovers
To close popup , add data-trigger="focus" attribute.
Example
Output
Bootstrap Example
Custom Popover Design
You can modify Popover design by modifying popover class.
Example
Output :
Bootstrap Example
Popover is similar to tooltips , a small box appear with additional information.You need to initialized Popover by jqery.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function
()
{
$('[data-toggle="popover"]').popover();
});
</script>
<body>
<br
/>
<br
/>
<div
class="container">
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information">Click
Me!</button>
</div>
</body>
</html>
Output
A Popover can be position Top ,bottom,left,right position.
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function
()
{
$('[data-toggle="popover"]').popover();
});
</script>
<body>
<br
/>
<br
/>
<div
class="container">
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="top">Click
Me!(Top)</button>
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="bottom">Click
Me!(Bottom)</button>
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="left">Click
Me!(Left)</button>
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="right">Click
Me!(Right)</button>
</div>
</body>
</html>
Output :
Closing Popovers
To close popup , add data-trigger="focus" attribute.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function
()
{
$('[data-toggle="popover"]').popover();
});
</script>
<body>
<br
/>
<br
/>
<div
class="container">
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="top"
data-trigger="focus">Click
Me!(Top)</button>
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="bottom"
data-trigger="focus">Click
Me!(Bottom)</button>
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="left"
data-trigger="focus">Click
Me!(Left)</button>
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="right"
data-trigger="focus">Click
Me!(Right)</button>
</div>
</body>
</html>
Custom Popover Design
You can modify Popover design by modifying popover class.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function
() {
$('[data-toggle="popover"]').popover();
});
</script>
<style>
.popover
{
border:
1px
thin
black;
}
.popover-title
{
background-color
:Gray;
color:
#FFFFFF;
font-size:
26px;
text-align:center;
}
.popover-content
{
background-color
:Lime;
color:
#FFFFFF;
padding:
25px;
}
</style>
<body>
<br
/>
<br
/>
<div
class="container">
<button
type="button"
class="btn
btn-warning"
data-toggle="popover"
title="Popover
Header"
data-content="Here
is my Information"
data-placement="bottom"
data-trigger="focus">Click
Me!(Top)</button>
</div>
</body>
</html>
