Question

I have created a popover on a dropdown via data attributes:

<select id="timezone_dropdown" data-content="This is the timezone" rel="popover" data-placement="bottom" data-original-title="Time Zone">

And whenever I click on a link button, I would like to show the popover floating over the dropdown.

<a class="btn timezone_help" href="#">Help</a>

In javascript I have defined it like this:

$(document).ready(function () { 
     $('.timezone_help').click(show_timezone_help);     
})

function show_timezone_help(event){
    event.preventDefault(); 
    $('#timezone_dropdown').popover('show');
}

This does the job, however when I click again on the button, it still stays there. Is there a way to check if its already open and hide it instead within the function, or is there a better way?

Answer 1

Use .popover('toggle'):

function show_timezone_help(event){
    event.preventDefault(); 
    $('#timezone_dropdown').popover('toggle');
}​

And add the attribute data-trigger="manual" to your dropdown.

DEMO.