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

问题

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.

回答1:

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

回答2:

When specifying the selector you are resetting the data-html value back to the default of false

so explicitly stating:

$(document).popover({
    selector: '[data-toggle="popover"]',
    html:true
});

will set the data-html value to true in this case. JS fiddle

回答3:

Instead of using

 $(document).popover({
    selector: '.selector'
});

If you want using selector then this is the code:

$('body').popover({
        selector: '.selector'
    });

$('.selector').popover();

来源：https://stackoverflow.com/questions/18011929/twitters-bootstrap-popover-with-selector-and-data-attributes

标签

twitter-bootstrap

selector

popover

twitter-bootstrap-3