css - Bootstrap Popover 大小在应用到 Handsontable 后增加

Question

我正在使用 Bootstrap 弹出窗口功能来实现我们正在制作的这个网络应用程序中的某个功能。

如果元素/对象有 data-toggle=popover，则触发每个弹出窗口属性。

正如您在这张图片中看到的:(请参阅下面我的第一条评论)

一切顺利，假定弹出框默认设置如下:

HTML

<!--Feel Rate Popover-->
<div id="feel-rate-popover" class="panel panel-primary">
  <div class="loading">Loading...
    <div class="panel-heading" id="feel-rate-heading">
        <div class="row">
            <div class="col-xs-3">
                <img class="feel-logo" src="images/happy_l.png">
                <div id="happy-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/sad_l.png">
                <div id="sad-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/angry_l.png">
                <div id="angry-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/surprised_l.png">
                <div id="surprised-count"></div>
            </div>
        </div>
    </div>

    <div class="panel-footer" id="feel-rate-footer">
      <a data-toggle="modal" data-target="#express-feeling-modal">
        <span class="pull-left">Express Feeling</span>
        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>
</div>

CSS

#feel-rate-popover,
#feel-rate-loading,
#warning-feeling {
  display: none;
}

.feel-logo {
  height: 85%;
  width: 85%;
}

.express-button {
  height: 75%;
  width: 75%;
}

.popover {
  width: 350px !important;
  max-width: 350px !important;
  height: 140px !important;
}

.col-xs-3 {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

#express-feel-row .col-lg-3 {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
}

#feel-rate-heading {
  padding: 5px 5px;
  margin-right: 5px;
  margin-left: 5px;
}

#feel-rate-footer {
  border-top: 1px solid #d7d7d7;
  background-color: #ffffff;
  padding: 5px 5px;
  height: 20px;
}

但是如果我将它应用到 <td> 上怎么办？ Handsontable 的弹出框出错了。 (请参阅下面我的第二条评论以获取链接)

您会注意到，弹出框的高度和重量增加了 4 像素。 (请注意，默认设置为 350px x 140px，而此设置为 354px x 144px)？

那怎么会变成这样呢？它是否与 handsontable.css 中的某些 CSS 重叠？ ？或者它是否继承了其父类(super class)/容器的任何样式？

这是 handsontable.css 的代码以供引用: https://github.com/handsontable/handsontable/blob/master/dist/handsontable.full.css

FIDDLE 引用: http://jsfiddle.net/anobilisgorse/hU6Kz/3286/

Answer 1

确保工具提示的容器设置为“正文”，那就是解决你的问题

function popover() {
$('[data-toggle="popover"]').each(function () {

    /* Instantiate the popover defaults */
    var $elem = $(this);
    $elem.popover({
        trigger: 'hover',
        html: true,
        container: 'body',
        content: function() {
            return $('#feel-rate-popover').html();
        }
    });

});