0

I have input fields which trigger a popover when getting focused (I chose a "top" placement).

<div class="form-group has-success">
    <label class="control-label" for="formRegister_email">Your e-mail</label>
    <input name="email" type="email" class="form-control" id="formRegister_email" placeholder="E-mail address" value="" data-toggle="popover" data-content="Please fill in a valid e-mail address" data-trigger="focus" data-placement="top" required="required" data-original-title="" title="">   
</div>

It works fine, but my input is about 600px in width and the popover is horizontaly centered with the form field.

enter image description here

I want it to be aligned with the left border of the form field. How can I do?

Thank you in advance

Alexis Romot
  • 524
  • 6
  • 19

1 Answers1

0

Ok, I've found the solution :

.on('shown.bs.popover', function () { 
    var offset = $(this).offset();
    $('.popover').css('left', Math.round(offset.left) + 'px');
});
Alexis Romot
  • 524
  • 6
  • 19