Bootstrap multiple popover display and placement

Question

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:

<div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >  

    <div class="js-tooltip" style="display: none;">
        <p><strong>Your name.</strong></p>
        <p>Enter your full name. This will be used ...</p>
    </div>
</div>

<div class="form-group">
    <label for="ref">Reference</label>

    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >  

    <div class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
   </div>
</div>

I have the following javascript

$(function () {
   $('.js-tooltip-trigger').popover({
       html: true,
       trigger: 'focus',
       content: function () {
           return $(correct tool tip).html();
       }
   });
});

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 eg <div class="js-tooltip" style="display:none;" data-tooltip="name"> <div class="js-tooltip" style="display:none;" data-tooltip="name"> and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?

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.

Manage to figure it out myself using the above html:

$(function () {
   $('.js-tooltip-trigger').popover({
       html: true,
       trigger: 'focus',
       content: function (e) {
           return $(this).parent(".form-group").find(".js-tooltip").html();
       }
   });
});

Can anyone think of a more elegant solution?

Answer 1

You can do like this way... Here is the DEMO

Jquery Part

 $(function(){

    // Enabling Popover Example 1 - HTML (content and title from html tags of element)
    $("[data-toggle=popover]").popover();

    // Enabling Popover Example 2 - JS (hidden content and title capturing)
    $(".form-control").popover({
        html : true, 
        content: function() {
          return $('.js-tooltip').html();
        },
        title: function() {
          return $('.js-tooltip').html();
        }
    });


});

HTML Part

<div class="form-group">
    <label for="name">Name</label>

    <input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >  

    <div class="js-tooltip" style="display: none;" id="n1">
        <p><strong>Your name.</strong></p>
        <p>Enter your full name. This will be used ...</p>
    </div>
</div>

<div class="form-group">
    <label for="ref">Reference</label>

    <input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">  

    <div class="js-tooltip" style="display: none;" id="t2">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
   </div>
</div>

Answer 2

I'm not a fan of how this works, but essentially you have to create an element that stays in the position you want the popover , and append the popover to it. In this case, I have used the container you already have in place for the tooltip html. I'm creating container ID's dynamically so you don't have to worry about doing that in your html.

So for this HTML:

<div class="form-group pos-relative">
    <label for="ref">Reference</label>
    <input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
    <span class="js-tooltip" style="display: none;">
        <p><strong>Your reference is optional.</strong></p>
        <p>Enter a code of your choice for reference purposes.</p>
    </span>
</div>

This CSS:

.pos-relative{
  position:relative;
}
.js-tooltip{
   position:absolute; 
   top:0;
   right:0;
}

And this JS--here's where it happens:

$(function () {

  $('.js-tooltip-trigger').each(function(ind, ele){

    var $ele = $(ele),
        $ttSpan = $ele.next('.js-tooltip'),
        ttHtml = $ttSpan.html(),
        rndID = 'ttid'+ String(Math.random()).substr(2);

    // set the ID, strip the style, and empty the html--
    // we already have it stored in the var above
    $ttSpan.attr('id', rndID).removeAttr('style').html('');

    // make the popovers
    $ele.popover({
        html: true,
        trigger: 'focus',
        placement: 'right',
        container: '#'+rndID, 
        content: ttHtml
    });

  });

});

See it in action here