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

<head> 
<script type="text/javascript">
         $(document).ready(function () {
             $(".popover-bottom").popover({
                 placement: 'bottom'
             });
             $(".popover-top").popover({
                 placement: 'top'
             });
             $(".popover-left").popover({
                 placement: 'left'
             });
             $(".popover-right").popover({
                 placement: 'right'
             });
         });
    </script>
</head>
<body>
    <h2>Popover with hover</h2>
    <div>
        <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>
        </ul>
    </div>

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

output

 Views: 508 | Post Order: 49



Write for us