CODEWITHSUNDEEP
twitter-bootstrap
Phillip Senn
Phillip Senn

Reputation: 47605

bootstrap popover

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.

Upvotes: 29

Views: 70326

Answers (3)

merv
merv

Reputation: 76760

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

Upvotes: 11

Zin Mi Tun
Zin Mi Tun

Reputation: 41

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>

Upvotes: 4

ews2001
ews2001

Reputation: 2187

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.

Upvotes: 29

Related Questions