Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap popover

Suggested Video Tutorials
Part 42 - Bootstrap tabs plugin
Part 43 - Bootstrap tooltip
Part 44 - Bootstrap tooltip manual trigger



In this video we will discuss the Bootstrap popover plugin.



Bootstrap popover is an extension to tooltip. Working with popover is very similar to working with tooltip. The difference is popover has an option to display both a title and content, while tooltip only has an option to display a title.

As you can see from the example below, creating a popover is very similar to creating a tooltip.
bootstrap popover examples

HTML
<button class="btn btn-primary" id="btnPopover" title="Popover Title"
        data-content="Popover content. Popover content. Popover content."
        data-toggle="popover">
    Popover Example
</button>

jQuery
$(document).ready(function () {
    $('#btnPopover').popover();
});

At the moment to show or hide the popover we have to click on the button. If you want the popover to close when you click anywhere outside the button, use data-trigger="focus"

<button class="btn btn-primary" id="btnPopover" title="Popover Title"
        data-content="Popover content. Popover content. Popover content."
        data-toggle="popover"
        data-trigger="focus">
    Popover Example
</button>

To show or hide the popover on hover use data-trigger="hover"
<button class="btn btn-primary" id="btnPopover" title="Popover Title"
        data-content="Popover content. Popover content. Popover content."
        data-toggle="popover"
        data-trigger="hover">
    Popover Example
</button>

To display an image in popover
bootstrap popover image example

<button class="btn btn-primary" id="btnPopover" title="Penguins"
        data-content="<img class='img-responsive' src='Images/Penguins.jpg'>"
        data-toggle="popover"
        data-html="true"
        data-placement="bottom"
        data-trigger="hover">
    Penguins
</button>

As you can see from the table below, majority of the options, methods and events of the popover plugin are very similar to tooltip plugin. 
popover options tooltip options
placement placement
title title
trigger trigger
animation animation
delay delay
html html
popover methods tooltip methods
popover('show') tooltip('show')
popover('hide') tooltip('hide')
popover('toggle') tooltip('toggle')
popover events tooltip events
show.bs.popover show.bs.tooltip
shown.bs.popover shown.bs.tooltip
hide.bs.popover hide.bs.tooltip
hidden.bs.popover hidden.bs.tooltip

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.