How to show bootstrap popover one at a time?

First you call the popover plugin with the selector

$('[data-toggle="popover"]').popover(options);

You must be set the "trigger" option to "manual" for showing one popover at a time.

$('[data-toggle="popover"]').popover({'trigger': 'manual'});

Then you should catch the click event. Show the current popover and hide others

$('[data-toggle="popover"]').on('click', function (e)
{
$(this).popover('show');
$('[data-toggle="popover"]').not(this).popover('hide');
});

The final code & demo is here

<!DOCTYPE html><!DOCTYPE html><html lang="en">    <head>        <title>How to show bootstrap popover one at a time</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>    <body>         <div class="container default-popover">
            <h3>
Popover example</h3>
<a href="#" data-toggle="popover" title="Header1" data-content="Some content inside the popover">Toggle popover1</a><br/>            <a href="#" data-toggle="popover" title="Header2" data-content="Some content inside the popover">Toggle popover2</a><br/>            <a href="#" data-toggle="popover" title="Header3" data-content="Some content inside the popover">Toggle popover3</a>        </div>
<div class="container modified-popover">
            <h3>
Popover One at a time</h3>
<a href="#" data-toggle="popover" title='Heading1 <a href="javascript:void(0)" class="close pull-right">×</a>' data-content="Some content inside the popover">Toggle popover1</a><br/>            <a href="#" data-toggle="popover" title='Heading2 <a href="javascript:void(0)" class="close pull-right">×</a>' data-content="Some content inside the popover">Toggle popover2</a><br/>            <a href="#" data-toggle="popover" title='Heading3 <a href="javascript:void(0)" class="close pull-right">×</a>' data-content="Some content inside the popover">Toggle popover3</a>        </div>
<script>            $(document).ready(function ()              {                 $(".default-popover").find('[data-toggle="popover"]').popover();                 $(".modified-popover").find('[data-toggle="popover"]').on('click', function (e)                 {                     $(this).popover('show');                     $(".modified-popover").find('[data-toggle="popover"]').not(this).popover('hide');                 });                  $(".modified-popover").find('[data-toggle="popover"]').popover(                 {                     'placement': 'auto right',                     'container': 'body',                     'trigger': 'manual',                     html: true,                     content: "Some content inside the popover"                 });                                  $(document).on("click", ".popover .close", function ()                 {                     $(this).closest(".popover").popover("hide");                 });             });         </script>    </body></html>

Demo

How to show bootstrap popover one at a time?

No comments:

Post a Comment

Popular Posts

Tags

Contact Form