skip to Main Content

I have the following HTML code:

<ul class="inline unstyled">
    <li class="select-value-li dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle select-value" data-placement="bottom">
            -- Select values to show --
            <b class="pull-right caret"></b>

<div id="popover_select_values" style='display:none'>
    <ul class="scrollable-menu unstyled">
        <li>element 1</li>
        <li>element 2</li>

This is my jQuery code:

    html: true,
    content: function() {
        return $("#popover_select_values").html();

I want to close this dropdown when I click anywhere outside it.

$(document).on('click', function(e) {
    var isDropdown = $('.select-value-li.dropdown-open').length > 0;
    if (!isDropdown) {

This is removing the entire dropdown. I cannot even see the select-values-to-show and the caret beside it. I just want to close the popover.

Check out this JSfiddle.



  1. You can simply just call $(".select-value").popover('hide') to close your pop over

    Login or Signup to reply.
  2. It is better to use data-trigger="focus" attribute to auto-hide popover on focus lost. So you don’t need to add extra event-handlers.

    But it is better to use Dropdowns for this case. Check the link below:

    Login or Signup to reply.
  3. Check out the following snippet:

    $(document).on('click', function(e) {
        var isDropdown = $('').length > 0;
        if (!isDropdown){

    Please be aware that clicking element 1 or 2 also closes the popover.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top