Popover actions in Bootstrap

How to trigger popover actions in Bootstrap

Popover actions

We have show, hide, toggle and destroy properties from which we can do actions manually for popovers.

Take a look at the below code to understand them clearly

<head>
<script type="text/javascript">
    $(document).ready(function () {
        $(".show-popover").click(function () {
            $(".popover-pop a").popover('show');
        });
        $(".hide-popover").click(function () {
            $(".popover-pop a").popover('hide');
        });
        $(".toggle-popover").click(function () {
            $(".popover-pop a").popover('toggle');
        });
        $(".destroy-popover").click(function () {
            $(".popover-pop a").popover('destroy');
        });
    });
    </script>
</head>
<body>
    <h2>Popover with hover</h2>
    <div>
        <p class="popover-pop list-inline">
            <a href="#" class="btn btn-info" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a>
        </p>
        <div>
            <input type="button" class="btn btn-primary show-popover" value="Show" />
            <input type="button" class="btn btn-success hide-popover" value="Hide" />
            <input type="button" class="btn btn-warning toggle-popover" value="Toggle" />
            <input type="button" class="btn btn-danger destroy-popover" value="Destroy" />
        </div>
    </div>
</body>

In the above code snippet we have defined the popover actions
In the body section of the HTML page we have value of class attribute popover-pop and we have anchor tag with class attribute as btn-info and we have given the data-toggle popover title as DotNetFunda and data-content as Fundamentals of .NET
In the next line we are having div section and we have input type button with show-popover, hide-popover, Toggle-popover, destroy-popover
In the head section of the HTML page we have function .popover-pop which calls the button DotNetFunda and the functions
$(".popover-pop a").popover('show');- It shows the popover to the button DotNetFunda
$(".popover-pop a").popover('hide');- It Hides the popover to the button DotNetFunda
$(".popover-pop a").popover('toggle');- It Toggles the popover to the button DotNetFunda
$(".popover-pop a").popover('destroy');- It Destroys the popover to the button DotNetFunda

output

Views: 5542 | Post Order: 51

Bootstrap > Popovers

Popover actions in Bootstrap

How to trigger popover actions in Bootstrap

Popover actions

Related Posts

Utility Tools