Popovers
Popovers are used to display additional information about any element and are displayed with a click of a mouse pointer over that element.
Syntax:
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the box"
The data-toggle attribute defines the Popover, the title attribute defines the Tile for the Popover and the data-content attribute is used to store the content to be displayed in the respective Popover.
Class | Description | Syntax |
---|---|---|
Right-alignment | Displays the popover at right of the element. | data-placement= “right” |
Left-alignment | Displays the popover at left of the element. | data-placement= “left” |
Bottom-alignment | Displays the popover at bottom of the element. | data-placement= “bottom” |
Top-alignment | Displays the popover at top of the element. | data-placement= “top” |
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover">
w3wiki</a>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us