bootstrap popover

Question

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.

Q: When I say: $('#myId').popover(); I get TypeError: $("#myId").popover is not a function. — Phillip Senn, Aug 16 '12 at 19:19
If you download the bootstrap-popover.js file the definition of the popover( the function) is defined from line 77. — uday, Aug 16 '12 at 19:20
Oooohhhh. So I have to include bootstrap.js, bootstrap-tooltip.js and bootstrap-popover.js, all three? — Phillip Senn, Aug 16 '12 at 19:25
Yes!!! all three... popover Extends the bootstrap-tooltip. see the line 37 of `bootstrap-popover.js` — uday, Aug 16 '12 at 19:27
@merv, I thought he had just downloaded the basic css and js functions version of it. As he got a error saying `popover is not a function` — uday, Aug 17 '12 at 21:23
@uDaY Well, to confound matters, I think earlier releases did NOT include the plugins in the default build, so what you said could very well have been your experience. Anyway, I ended up saying what I wanted to say in the answer I wrote, so I think I'm going to remove the comment, since looking back at it I find it a bit alarmist. ;) — merv, Aug 17 '12 at 22:56
If you are using bootstrap 3 then bootstrap.min.js is enough to get them worked :) — Anirudha Gupta, Jun 11 '14 at 09:02

score 29 · Accepted Answer · edited Aug 23 '13 at 15:25

29

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.

edited Aug 23 '13 at 15:25

totymedli

29,531
22
131
165

answered Aug 16 '12 at 19:19

ews2001

2,176
3
26
38

I see that you're using bootstrap-tooltip.js and bootstrap-popover.js to minimize the footprint. But I just want it to work and I'm not concerned about file size. Isn't popover and tooltip included in the bootstrap.js file? – Phillip Senn Aug 16 '12 at 19:21
1

No, the popover is considered a plugin (modal, tooltips, collapse, etc), so it's not included in the main bootstrap.js file. You could add the popover code to bootstrap.js or use minify to compress multiple javascript files to minimize the footprint? http://twitter.github.com/bootstrap/javascript.html#javascript – ews2001 Aug 16 '12 at 19:25
I don't really care about the footprint. I'm just trying to get it to work right this first time. – Phillip Senn Aug 16 '12 at 19:28
Maybe you could post more of your code, so we can help you "get it to work"? – ews2001 Aug 16 '12 at 19:30
What is this: rel="popover"? That wasn't mentioned in the documentation, although they do mention rel="tooltip". – Phillip Senn Aug 16 '12 at 19:30
1

Using the rel attribute, it's easy to target all of the tooltips (or popovers) on a single page, like so `$('[rel=tooltip]').tooltip()`, here is another good reference to take a look at: http://stackoverflow.com/questions/10436231/tooltips-with-twitter-bootstrap – ews2001 Aug 16 '12 at 19:41
I'm embarrassed to say that I think I had my call to popover above bootstrap.js. That's because there were some things that I wanted to do before bootstrap was called, like $('table').addClass('table table-striped table-bordered table-hover'); – Phillip Senn Aug 24 '12 at 15:07
Sorry a bit late for the party. Add the tooltip.js before popover.js, that did the trick for me. – edocetirwi Feb 08 '13 at 23:59
@ews2001 Has this changed with Bootstrap 3? There is a note that it needs to be included manually, yet it also says the bootstrap.js/bootstrap.min.js include all the plugins by default. – ZAD-Man Aug 25 '14 at 20:59
1

@ZAD-Man - Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js) - taken from this page: http://getbootstrap.com/javascript/ – ews2001 Aug 26 '14 at 21:21

score 11 · Answer 2 · edited Nov 28 '13 at 19:49

The version of bootstrap.js which is included in the download found on the project's homepage already includes all the plugins compiled into it. That includes bootstrap-tooltip.js and bootstrap-popover.js.

Popover is the constructor object for the jQuery plugin, but you should not need to instantiate that directly.

The plugin will extend jQuery, adding the method $.fn.popover(), which when called will create an instance of a Popover object and attach it to the element you selected. That object can be accessed on your element (say, id="elem") using $('#elem').data('popover').

Here is a simple JSFiddle that demonstrates one way to create a popup, basically using what you had in the OP, $('#elem').popover().

Update: JSFiddle with Bootstrap v.3

score 4 · Answer 3 · edited Nov 21 '13 at 10:31

Why popover and tooltip don't work in bootsrap?

The answer is popover or tooltip initializing code $("#myButton").popover(); should be place under <script src="js/jquery-1.10.1.min.js"></script>; and <script src="js/bootstrap.min.js"></script>.

Like the following procedure. I think will be ok.

<button type="button" id="myPopover" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
      Popover on Right
</button>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
      $('#myButton').tooltip();
      $('#myPopover').popover();
</script>

bootstrap popover

3 Answers3