Twitter's Bootstrap popover with selector and data-* attributes
Solution 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
Solution 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
Related videos on Youtube
disfated
Updated on June 09, 2022Comments
-
disfated about 2 years
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.