>The problem is that if I try to close at `.on("hidden")`, the targets are already unavailable

That's because the `hidden.bs.modal` event fires: 

> "when the modal has finished being hidden from the user (will wait for CSS transitions to complete)."

Instead, use the [`hide.bs.modal`][hide.bs.modal] event which: 

> " is fired immediately when the hide instance method has been called"

Like this:



    $('.modal').on('hide.bs.modal', function() {
      $("#openPopover").popover("hide")
    });

## [Demo in Bootply][bootply]

[hide.bs.modal]: http://getbootstrap.com/javascript/#modals

[bootply]: http://www.bootply.com/eLWGUzTqYM

---

### Update

I'm curious if you're `hidden` event was even firing in the first place.  The event name is namespaced so you have to refer to it as `hidden.bs.modal`

This will never get called:

    $('.modal').on('hidden', function() {
      alert('hi');
    });

This should work:

    $('.modal').on('hidden.bs.modal', function() {
      $("#openPopover").popover("hide")
    });

I want to close all popovers that are in a modal, so that they are not displayed if I reopen the modal.

The problem is that if I try to close at `$("#modal").on("hidden", function() { [...] });`, the targets are already unavailable. The same goes if I do it at `.on("shown", ...`.

I cannot delete using :

    $(".buttonPopover").popover("hide");

Because `.buttonPopover` is never available at the time I want to delete the popovers. How can I close them all without accessing their parent ?

**[Bootply][1]**


  [1]: http://www.bootply.com/uWieWmHab9

How to close popovers on modal close?

From the [Docs on Popovers][popover]: 

>**Opt-in functionality:**  
>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you *must initialize them yourself*.

So you must call `.popover()` manually in JavaScript like this:



    $("[data-toggle=popover]").popover();

Or you can use whatever selector you want

[popover]: http://getbootstrap.com/javascript/#popovers

### Here's an example using StackSnippets.





    $("[data-toggle=popover]").popover();



    body {
      padding: 50px;
    }



    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


    <button type="button" class="btn btn-lg btn-danger" 
            data-toggle="popover" title="Popover title" 
            data-content="And here's some amazing content. It's very engaging. Right?">
      Click to toggle popover
    </button>




**Note**: This is similar to the answer to [Bootstrap *Tooltip* Not Showing Up](https://stackoverflow.com/a/20567636/1366033)

The bootstrap popover is not showing up my page

Here is my HTML:

    <button type="button" class="btn btn-lg btn-danger" 
            data-toggle="popover" title="Popover title"
            data-content="And here's some amazing content. It's very engaging. Right?">
         Click to toggle popover
    </button>

Here are all the js and css files I've added:

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/bootstrap.min.css")
    @Styles.Render("~/Content/bootstrap.css")
    @Styles.Render("~/Content/bootstrap-theme.css")
    @Styles.Render("~/Content/css/default.css")

    @Scripts.Render("~/Scripts/jquery-2.1.1.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/bootstrap.js")

Can someone tell me where is the problem?

PS: Is there a way to get the popover to work without having to write any script code?

Bootstrap popover is not working

To answer your question:

> Is the `data-placement` attribute ignored when you pass in the property in JavaScript?

**Yes** - Here's a snippet from [tooltip.js][1]:

    Tooltip.prototype.getOptions = function (options) {
        options = $.extend({}, this.getDefaults(), this.$element.data(), options)

You'll see that when creating the options for each tooltip (from which popover inherits), Bootstrap calls [jQuery's extend][2] which combines the following objects in this exact order:

1. The plugin **defaults**
2. Then the **data-attributes**
3. And finally the passed in **options** object

### Solution

To change this, we can override the `GetOptions` function using the [Programmatic API][3] and reversing the order of operations:



    $.fn.popover.Constructor.prototype.getOptions = function (options) {

      options = $.extend({}, this.getDefaults(), options, this.$element.data())

      if (options.delay && typeof options.delay == 'number') {
        options.delay = {
          show: options.delay,
          hide: options.delay
        }
      }

      return options
    }

Additionally, we can maintain a little less code by pre-merging the options and the element data and then [passing that back to the original function][4] to override both so we don't have to spell out the entire function



    var _getOptionsOriginal = $.fn.popover.Constructor.prototype.getOptions

    $.fn.popover.Constructor.prototype.getOptions = function (options) {
      options = $.extend({}, options, this.$element.data())
      return _getOptionsOriginal.call(this, options);
    }

**Here's a Demo in Stack Snippets**:





    var _getOptionsOriginal = $.fn.popover.Constructor.prototype.getOptions

    $.fn.popover.Constructor.prototype.getOptions = function (options) {
      options = $.extend({}, options, this.$element.data())
      return _getOptionsOriginal.call(this, options);
    }

    $("[data-toggle='popover']").popover({placement: 'bottom'})



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="container" >

      <h2>Popovers</h2>

      <button type="button" class="btn btn-default" 
              data-container="body" data-toggle="popover" 
              data-placement="right" data-content="Vivamus sagittis">
        Popover on Right - Data Attribute
      </button>
      <br/><br/>
      <button type="button" class="btn btn-default" 
              data-container="body" data-toggle="popover" 
              data-content="Vivamus sagittis">
        Popover on Bootom - Option
      </button>

    </div>






[1]: https://github.com/twbs/bootstrap/blob/master/js/tooltip.js#L84
[2]: http://api.jquery.com/jquery.extend/
[3]: http://getbootstrap.com/javascript/#js-programmatic-api
[4]: https://stackoverflow.com/a/14823315/1366033

I'm initializing Bootstrap's popovers like this:



    $(".popovers").popover({
      placement: "right" 
    });

Occasionally, I'll want to display a popover in a specific place, so I use a `data-placement` attribute on that particular element like this:



    <i class="popovers fa fa-question-circle"
       data-content="Some popover text." 
       data-placement="bottom" >
    </i>


Bootstrap seems to ignore the `data-placement` attribute and uses the option settings instead.

It seems to me the `data-placement` attribute should override anything passed to the initialization method.  I've scoured the Bootstrap 3 docs and can't find anything that confirms or denies this.  

Here's a small demo:





    $(".popovers").popover({
      container: "body", 
      trigger: "hover",
      placement: "right" 
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

    <div class="container">
      <i class="popovers fa fa-question-circle"
         data-content="Some popover text." 
         data-placement="bottom" 
         data-original-title="">
      </i>
    </div>






Is the `data-placement` attribute ignored when you pass in the property in JavaScript?