How Do I Implement a Popover in a Rails Partial Using Bootstrap 3?

Question

I currently have a Rails 4 application running Bootstrap 2 (gem twitter-bootstrap-rails 2.2.8). I was successful in implementing a popover using partials where a map is displayed when a link is clicked. Here is the code that I have.

application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

bootstrap.js.coffee

jQuery ->
  $(".popover-map").popover({ html : true })

_map

<div class="row-fluid">
  <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div>
  <div class="span4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div>
  <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div>
</div>

_map_marfa

<p align="center"><%= image_tag("map-marfa.jpg", alt: "#{t :map_marfa_head}") %></p>

_map_bigbend

<p align="center"><%= image_tag("map-bigbend.jpg", alt: "#{t :map_bigbend_head}") %></p>

When I click either link the map display below and stays there until the person clicks the link again to close the map. I have copied the code to my new Rails 5 Bootstrap 3 application. Here are the code changes for Bootstrap 3.

application.js

//= require bootstrap-sprockets

bootstrap.js.coffee was renamed to bootstrap.coffee

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

_map

<div class="row">
  <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div>
  <div class="col-md-4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div>
  <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div>
</div>

Now when I click either link the map displays and immediately disappears instead of staying until the link is clicked.

Answer 1

I kept looking at this and realized that in application.js I required turbolinks. For whatever reason it messes up things I try to do. I removed //= require turbolinks and my scripts work again. Go figure.