Twitter's Bootstrap popover with selector and data-* attributes

popover, selector, twitter-bootstrap, twitter-bootstrap-3

Solution

The data-elements are not used caused they are set on initialization instead of on show of the element. This won't work for a selector which only use the same options for all set in your initializator. I don't know this is a bug. (update yes it is and it is fixed: https://github.com/twbs/bootstrap/issues/9222)

Quick fix extend your show function and set the options (again) there:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>    

var tmp = $.fn.popover.Constructor.prototype.show
$.fn.popover.Constructor.prototype.show = function () {
  var $e = this.$element
  if (typeof($e.attr('data-html')) != 'undefined')this.options.html = ($e.attr('data-html')==='true') 
  if (typeof($e.attr('data-placement')) != 'undefined')this.options.placement = $e.attr('data-placement');
  /* add other options here */
  tmp.call(this);
}

This will work for Twitter's Bootstrap 2.x and Twitter's Bootstrap 3(RC1)

Also see: http://jsfiddle.net/bassjobsen/YsEqb/1/

Note when using the CDN as above you will got a JS error on closing the popover (TypeError: this.remove is not a function) see: https://github.com/twbs/bootstrap/issues/8887

Problem

Using ``` $(document).popover({ selector: '.selector' }); ``` ignores any `data-*` attributes specified in target elements. For example ``` <a class="selector" title="bla" data-content="some html" data-html="true">link</a> ``` popover will skip `data-html` attribute. Proof: http://jsfiddle.net/YsEqb/ The question is: How make bootstrap take into account `data-*` attributes in case of delegated attachment ({ selector: '.selector' }) ? UPD This was confirmed as bug and fixed. Version 3.0.0 won't have this bug.

Original source