Pop over in bootstrap

popover in Bootstrap
Pop over message is one step ahead of Tool Tip in Bootstrap

 Attributes:-
title:- This will show Title of Tool Tip
data-content:-This will show Content of Tool Tip
data-placement:-It indicates Position of Tool Tip i.e. top,bottom,left,right
data-trigger:-It indicates on which event Tool Tip will occur i.e click,hover

Example:-

<button type="button" class="btn btn-success popover-destroy"
        title="Popover title" @*title of tooltip*@
        data-content="Some content in Popover-destroy method" @*Content of tooltip*@
        data-placement="bottom" @*Position  top,bottom,left,right*@
        data-trigger="hover" @*Event click,hover,focus *@>

    Popover on bottom
</button>


And

 $('.popover-destroy').popover();
in $(document).ready

Markup In popover in Bootstrap
you can implement markup like table in popover by script also can pass attributes in popover function
for example if i want to display table in popover then i have to write its html attribute true like
html:true
and also content attribute which return markup like
content: function () {
                return $('#popupDemo').html();
            }
Example:-

<a class="PopupTop">Top</a><br/>
<div id="popupDemo" style="display:none;">

    <table>
        <tr>
            <th>
                Title
            </th>

            <th>
                Content
            </th>
        </tr>
        <tr>
            <td>
                Title1
            </td>

            <td>
                Content1
            </td>
        </tr>

        <tr>
            <td>
                Title1
            </td>

            <td>
                Content1
            </td>
        </tr>

    </table>


</div>

$('.PopupTop').popover({
            trigger: "hover",//Events click,hover,focus
            title: "Title",//title
            placement:"top",//top,bottom,right,left
            html: true,
            content: function () {
                return $('#popupDemo').html();
            }

        });

Output:-


Events:-
it has four events respectively
1]show.bs.popover:-it trigger before Tool Tip show
2]shown.bs.popover:-it trigger after Tool Tip show
3]hide.bs.popover:-it trigger before Tool Tip hide
4]hidden.bs.popover:-it trigger after Tool Tip hide

Example:-
        $(function(){ $('.popover-destroy').on('show.bs.popover', function () {
            alert("show");
        })});
        
        $(function(){ $('.popover-destroy').on('shown.bs.popover', function () {
            alert("shown");
        })});

        $(function(){$('.popover-destroy').on('hide.bs.popover', function () {
            alert("hide");
        })});

        $(function(){$('.popover-destroy').on('hidden.bs.popover', function () {
            alert("hidden");
        })

        });