Popovers
Description
Popovers are like tooltips but larger and more stylish.
You can place more content in a popover than a tooltip. It is recommended to use popovers instead of tooltips when you have more HTML content or textual content to display.
The data-toggle attribute directs what to trigger when an action is performed on this button.
The data-placement attribute specifies the position of the popover.
The data-content attribute should contain the content you want to convey in the popover.
Finally, set the title attribute to append a header to the plugin.
We need to add the popoverButton class to the button.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www .j a v a 2 s . c o m-->
$('.popoverButton').popover();
});
</script>
</head>
<body style='margin:30px'>
<!-- Popover -->
<button type="button"
class="btn btn-danger popoverButton"
data-toggle="popover"
data-placement="bottom"
data-content="Lorem Ipsum Donor."
title="This is a demo popover">
Click Me!
</button>
</body>
</html>