Question

I am using bootstrap with Django and so far everything as worked. However, I am trying to use the popover functionality, and I keep running into a problem. Whenever a click my popover, the page scrolls back to the top… BUT the popover do appear. here is my code:

//////////<..... a lot more HTML ....>//////////
<div class="bs-docs-example">
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" id="testpop" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
{% endblock %}


{% block js %}
{{ block.super }}

{% bootstrap_javascript_tag "modal" %}
{% bootstrap_javascript_tag "alert" %}
{% bootstrap_javascript_tag "tooltip" %}
{% bootstrap_javascript_tag "popover" %}

<script type="text/javascript">
$("#testpop").popover();
</script>

Thanks a lot!

Answer 1

You can solve that by preventing the default action of the anchor element:

$('a#testpop').on('click', function(e) {e.preventDefault(); return true;});