使用数据属性覆盖弹出选项参数

Question

我正在像这样初始化 Bootstrap 的弹出框：

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

偶尔，我想在特定位置显示弹出窗口，因此我在该特定元素上使用 data-placement 属性，如下所示：

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

Bootstrap 似乎忽略了 data-placement 属性，而是使用选项设置。

在我看来，data-placement 属性应该覆盖传递给初始化方法的任何内容。我已经搜索了 Bootstrap 3 个文档，但找不到任何可以证实或否认这一点的内容。

这是一个小演示：

$(".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>

在JavaScript中传入属性时是否忽略了data-placement属性？

Answer 1

回答你的问题：

Is the data-placement attribute ignored when you pass in the property in JavaScript?

是 - 这是来自 tooltip.js 的片段：

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

您会看到，在为每个工具提示创建选项时（弹出窗口从中继承），Bootstrap 调用 jQuery's extend，它按此确切顺序组合了以下对象：

插件默认值
然后数据属性
最后传入 options object

解决方案

要更改此设置，我们可以使用 Programmatic API 并反转操作顺序来覆盖 GetOptions 函数：

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

此外，我们可以通过预先合并选项和元素数据来维护更少的代码，然后 passing that back to the original 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);
}

这是 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>

使用数据属性覆盖弹出选项参数

Override popover option parameter with data-attributes

javascript

jquery

popover

twitter-bootstrap

twitter-bootstrap-3

解决方案