Question

我正在初始化Bootstrap的popovers：

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

回答你的问题：

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

是 - 这是tooltip.js的摘录：

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

你会看到，在为每个工具提示创建选项时（popover继承），Bootstrap会调用jQuery's extend，它按照以下顺序组合以下对象：

插件默认
然后是数据属性
最后传入选项对象

解决方案

要更改此设置，我们可以使用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>

使用data-attributes覆盖popover选项参数

1 个答案:

解决方案