Twitter Bootstrap Popover - DOM Placement

Question

I have Bootstrap Popovers working fine, but a popover is added to the body at the bottom of the document, unlike the slightly lower launch element, as is done in the documentation for the bootstrap: http://twitter.github.com/bootstrap/javascript.html# popovers

Does anyone know how to control where a popover is inserted? Or at least ask him to add to the parent launchers?

Here is what I have:

http://jsfiddle.net/qt34N/4/

<a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on top">Popover on top</a> 

JQuery

 $("a[rel=popover]").popover(); 

Suggestions?

Answer 1

The demo uses a newer version of bootstrap. Update to the latest version and it will work the way you want it.

http://jsfiddle.net/qt34N/10/

 jQuery(document).ready(function($) { $("a[rel=popover]").popover(); });​ 

Answer 2

Do you include a tooltip (bootstrap-tooltip.js) as needed?
http://twitter.github.com/bootstrap/javascript.html#tooltips

Add small content overlays, such as on the iPad, to any element to host secondary information. Hover over a button to call a popover. You want to enable the tooltip .

As for the placement, you set it in the following parameters:

 $('#example').popover({placement:'top'}) 

or through the data attribute:

 data-placement="top"