Geek Answers Handbook

Override popover option parameter with data attributes

I initialize Bootstrap popups as follows:

$(".popovers").popover({
  placement: "right" 
});

Sometimes I want to display a popover in a specific place, so I use the attribute data-placementfor this particular element as follows:

<i class="popovers fa fa-question-circle"
   data-content="Some popover text." 
   data-placement="bottom" >
</i>

Bootstrap seems to ignore the attribute data-placementand uses parameters instead.

It seems to me that the attribute data-placementshould override everything that is passed to the initialization method. I have looked at Bootstrap 3 docs and cannot find anything that confirms or denies this.

Here is 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>
Run codeHide result

Attribute data-placementignored when passing property in JavaScript?

+4
1

:

data-placement JavaScript?

. tooltip.js:

Tooltip.prototype.getOptions = function (options) {
    options = $.extend({}, this.getDefaults(), this.$element.data(), options)

, ( popover) Bootstrap jQuery ext, :

  • , ,

, GetOptions Programmatic API :

$.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
}

, , , , ,

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);
}

:

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>
Hide result
+3

More articles:


All Articles