如何设置popover的字体大小？

Question

简单的CSS问题我不得不问，因为我在CSS方面不太好。我做了一个popover模态函数，所以当用户将鼠标悬停在链接上时，模态显示为

但是你可以看到标题显示非常庞大，我怎样才能使字体变小？我似乎无法找到CSS。我的代码如下：

＆＃13;

＆＃13;

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover'
    });
});
</script>

＆＃13;

<a href="{{action('AltHr\Chatbot\ChatbotController@queries', [$companyID, $entityType, $entityValue])}}" class="btn btn-link" data-toggle="popover" title="{{ucwords($entityValue)}}" data-content="Default popover">{{ucwords($entityValue)}}</a>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<style type="text/css">
  /* Popover Header */
  .popover-title {
      font-size: 12px;
  }
  /* Popover Body */
  .popover-content {
      font-size: 12px;
  }
</style>

＆＃13;

＆＃13;

＆＃13;

它使用bootstrap。

Answer 1

值得注意的是，弹出窗口内的字体大小可能与它所在的容器有关。在尝试更改任何CSS之前，请尝试通过以下方法设置容器 data-container="body"。您可以使用任何其他容器，它将继承该容器的字体信息。

默认情况下，它将继承在其中创建的任何容器。

例如：

body {
    font-size: 12pt;
}

ul {
    font-size: 72pt;
}

<ul>
    <li data-toggle="popover" data-content="foobar">test</li>
</ul>

也将导致弹出框的巨大字体大小。但是，您可以这样做：

body {
    font-size: 12pt;
}

ul {
    font-size: 72pt;
}

<ul>
    <li data-toggle="popover" data-content="foobar" data-container="body">test</li>
</ul>

弹出窗口的字体大小为12pt。

Answer 2

不知道我拥有哪个版本，但就我而言，它是：

    .popover-header {
        font-size: 12px;
    }

    .popover-body {
        font-size: 13px;
    }

Answer 3

如果您使用的是v4.x，请尝试使用此CSS设置

    .popover {
      border: 1px dotted #ccc !important;
      max-width: 600px !important;
    }
    
    .popover-body{
      color: black !important;
      font-size: 12px !important;
      max-width: 600px !important;
        
    }