Question

Someone else asked this question here, but there was no answer or solution given.

These bootstrap files are listed at the top of my application.js file:

...
//= require bootstrap-tooltip
//= require bootstrap-popover
...

My bootstrap_additions.js.coffee file contains:

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

In a view I have:

<a href="#" class="btn" rel="popover" title="Title" data-content="Some content.">click</a>

When i enter localhost:3000/assets/application.js in the browser, the bootstrap-popover.js content is present. In addition i found the following:

jQuery(function() {
    $("a[rel=popover]").popover().on('click', preventDefault());
    $(".tooltip").tooltip();
    return $("a[rel=tooltip]").tooltip();
});

When the link is clicked the browser display is moved to the top of the page. When I scroll back down to the link, the popover is displayed. All is working except preventDefault. What am I missing?

Thanks.

---

UPDATE: To keep things clean in my code, i found the coffeescript version of the selected answer:

$("a[rel=popover]").popover().click (e) => e.preventDefault()

Answer 1

Using Twitter Bootstrap Popover

Updated to be in Coffeescript

1st approach

Instantiate

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

Handle

$("a[rel=popover]").click (event) ->
  event.preventDefault()
  event.stopPropagation()
  $(this).popover "show"

2nd approach

Taken directly from their source code:

$("a[rel=popover]").popover().click (e) ->
  e.preventDefault()