title: Bootstrap multiple popover display and placement
body: <p>I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt;
  
      &lt;input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" &gt;  
  
      &lt;div class="js-tooltip" style="display: none;"&gt;
          &lt;p&gt;&lt;strong&gt;Your name.&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;Enter your full name. This will be used ...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="ref"&gt;Reference&lt;/label&gt;
  
      &lt;input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" &gt;  
  
      &lt;div class="js-tooltip" style="display: none;"&gt;
          &lt;p&gt;&lt;strong&gt;Your reference is optional.&lt;/strong&gt;&lt;/p&gt;
          &lt;p&gt;Enter a code of your choice for reference purposes.&lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the following javascript </p>
  
  <pre><code>$(function () {
     $('.js-tooltip-trigger').popover({
         html: true,
         trigger: 'focus',
         content: function () {
             return $(correct tool tip).html();
         }
     });
  });
  </code></pre>
  
  <p>How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <code>&lt;div class="js-tooltip" style="display:none;" data-tooltip="name"&gt;</code> and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution? </p>
  
  <p>Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.</p>
  
  <p>Manage to figure it out myself using the above html:</p>
  
  <pre><code>$(function () {
     $('.js-tooltip-trigger').popover({
         html: true,
         trigger: 'focus',
         content: function (e) {
             return $(this).parent(".form-group").find(".js-tooltip").html();
         }
     });
  });
  </code></pre>
  
  <p>Can anyone think of a more elegant solution?</p>