How Do I Implement a Popover in a Rails Partial Using Bootstrap 3?
<p>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.</p>

<p>application.js</p>

<pre><code>//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
</code></pre>

<p>bootstrap.js.coffee</p>

<pre><code>jQuery -&gt;
  $(".popover-map").popover({ html : true })
</code></pre>

<p>_map</p>

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

<p>_map_marfa</p>

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

<p>_map_bigbend</p>

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

<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.</p>

<p>application.js</p>

<pre><code>//= require bootstrap-sprockets
</code></pre>

<p>bootstrap.js.coffee was renamed to bootstrap.coffee</p>

<pre><code>//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
</code></pre>

<p>_map</p>

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

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