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
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: 4020 | Post Order: 50