jquery - How to fix scrolling with twitter-bootstrap and popover?

Question

I am using twitter-bootstrap and popovers.

I am facing the following problem: when the user clicks on a link that opens a popover at the bottom of the page, it scrolls all the way to top of the page first. This requires the user to scroll back down to see the popover open. In the demos on the twitter-bootstrap site, I don't see this and was wondering if I could get help on this issue.

<div class="span1" style=" width: 60px; ">
    <a href="#" class="example2" rel="popover" data-html="true" data-placement="left" data-content="&lt;a href = '/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas'&gt;&lt;img src='http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg'&gt;&lt;/a&gt;" data-original-title="Bhangra indian Jingle Bells balle balle Merry Christmas">
        <img src="http://graph.facebook.com/1236870349/picture">
    </a>

    <div class="popover fade left in" style="top: 831px; left: 805.61669921875px; display: block;">
    <div class="arrow"></div>
    <div class="popover-inner">
        <h3 class="popover-title">Bhangra indian Jingle Bells balle balle Merry Christmas</h3>
        <div class="popover-content">
            <p><a href="/social/2lPdXV1KO4s/Bhangra indian Jingle Bells balle balle Merry Christmas"><img src="http://i4.ytimg.com/vi/2lPdXV1KO4s/hqdefault.jpg"></a></p>
        </div>
    </div>
</div>

Answer 1

It seem like you now have to prevent the default behavior of the link because they added the option to popup the popover on hover/focus. Right now the link will activate and since the href is pointing to "#" it will bring you to the top of the page. Before in older versions, it used to prevent this default automatically.

Your javascript code should look something like this:

<script>
$("a[rel=popover]")
    .popover()
    .click(function(e) {
        e.preventDefault();
     });
 </script> 

With html like this

<a href="#" 
   class="btn btn-large btn-danger" 
   rel="popover" 
   data-content="And here's some amazing content. It's very engaging. right?" 
   data-original-title="A Title">
     Click to toggle popover
 </a>

Here is a working JSfiddle. http://jsfiddle.net/hajpoj/KPU47/7/

Edit: Alternatively you could use a div instead of a anchor tag and not have to do the whole prevent default thing.

<div 
   class="btn btn-large btn-danger popover-link"
   data-content="And here's some amazing content. It's very engaging. right?"
   data-original-title="A Title">Click to toggle popover
</div>?

<script>
    $(".popover-link").popover();
</script>