bootstrap popover
twitter-bootstrap
Solution
Here's a pretty simple example:
<html>
<head>
<link href="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function (){
$("#example").popover();
});
</script>
</body>
</html>
The sample includes the tooltip JavaScript that you'll need as well. Just view the source of the page.
Problem
I'm not sure how boostrap implements popover. I have included bootstrap.js, and it has a function called Popover (upper case P), but in their example, they use: ``` $('#example').popover(options) ``` Now, they say it requires tooltip to be included, but I don't know what that means. Their examples all include a bunch of .js files and I think in reality they're all packaged up together. And since I'm at the proof-of-concept phase, where I'm trying to get it to work right the first time, I'm not concerned about the file size or caching.