Bootstrap popover position and placement and tip

Question

How do you position the bootstrap popover so that it doesn't float away from the triggering element upon window resize?

what css needs to be applied to move the tip to the top edge of the popover i.e near the corner?

I have the following options set but it places the popover on the left instead of right.

$(function () {
  $('.js-tooltip-trigger').popover({
    html: true,
    trigger: 'focus',
    placement: 'auto right',
    content: function (e) {
        return $(this).parent(".form-group").find(".js-tooltip").html();
    }
  }).on('shown.bs.popover', function () {
       $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
     });
});

The html:

<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 think it's repeated question... **http://stackoverflow.com/questions/30503604/bootstrap-multiple-popover-display-and-placement?noredirect=1#comment49092490_30503604** — sheshadri, May 28 '15 at 14:27

Ted · Accepted Answer · 2015-05-28T16:05:38.817

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

edited May 28 '15 at 16:05

answered May 28 '15 at 14:29

Ted

14,757
2
41
58

Why can't you use the id of the triggering element in the above case the input field instead of creating a new id each time you want to display a popover that remains with its container? – adam78 May 28 '15 at 14:49
@ozzi - I updated the answer to use your current structure/html, without adding any elements or special ID's to your markup (manually). Take a look at the updated demo. – Ted May 28 '15 at 16:07
This works great - thanks. One thing Ted, how can you get it to place right but re-orient to the bottom or auto when you resize the window. I've tried changing placement to auto right as per the documentation but it doesn't work - popover remains on right outside of viewport? – adam78 May 28 '15 at 16:40
@ozzii Redefine the CSS for `.js-tooltip` within a media query for small screens. – Ted May 28 '15 at 16:51
Tried adding a media query and whilst you can move it to the bottom of the triggering element upon window resize you end up having to add additional css to change the arrow direction. Also when you focus into the trigger on a small viewport the popover moves back to the right. I think the placement declaration in the jquery overides any media query. – adam78 May 28 '15 at 20:02

Bootstrap popover position and placement and tip

1 Answers1