Bootstrap > Popovers

Popover positions in Bootstrap

How to change the Bootstrap popover positions?

Popover positions

We can place the popover positions to left, right, top, bottom by using data-placement property

<script type="text/javascript">
         $(document).ready(function () {
                 placement: 'bottom'
                 placement: 'top'
                 placement: 'left'
                 placement: 'right'
    <h2>Popover with hover</h2>
        <ul class="list-inline">
            <li><a href="#" class="btn btn-warning popover-bottom" data-toggle="popover"  title="Forums" data-content="Resolved Posts">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger popover-top" data-toggle="popover" title="Step by step" data-content="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-success popover-left" data-toggle="popover" title="Step by step" data-content="Tutorials">ITFunda</a></li>
            <li><a href="#" class="btn btn-info popover-right" data-toggle="popover" title="Step by step" data-content="Tutorials">KidsFunda</a></li>

In the above code snippet we have defined the positions of the popover

In the body section of the HTML page we have value of class attribute as list-inline in the ul element and we have anchor tag   with data-toggle as popover , data-content defines content in the popover, title defines the title of the popover with buttons and class attribute

  • btn-warning popover-bottom with value DotNetFunda
  • btn-danger popover-top with value TechFunda
  • btn-success popover-left with value ITFunda
  • btn-info popover-right with value KidsFunda

In the head section of the HTML page we have the script function, we have defined the functions 

$(".popover-bottom").popover({})- renders placement -bottom

$(".popover-top").popover({})- renders placement -top

$(".popover-left").popover({})- renders placement - left

$(".popover-right").popover({})- renders placement -right


 Views: 444 | Post Order: 49

Write for us