如何在悬停模式弹出窗口中更改字体大小

Question

嘿所以我在悬停上创建一个带模态显示的按钮，所以我使用下面的代码设法完成了那部分：

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

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

使用这个代码我已经实现了，所以你们可以看到它的运作良好，但你可以看到标题大小太大，我怎么能用CSS减小它？而不是显示上面的弹出窗口，我怎么能在右侧显示它？我不是很好的CSS。

Answer 1

如果您使用Bootstrap作为弹出窗口，则需要在CSS中使用javascript生成的元素类才能访问样式的标题。

根据库版本，它可能是.popover-title或.popover-header：

.popover-title {
    font-size: 15px;
}

对于展示位置问题，您可以在通过Javascript启用弹出窗口时对选项进行更改：

$('[data-toggle="popover"]').popover({
    placement : 'right',
    trigger : 'hover'
});

针对以下评论进行更新：一些可能的解决方案。

1）确保您的CSS文件包含在包含您需要覆盖的样式的文件之后。

2）右键单击并检查元素以查看现有样式规则需要覆盖的内容。如果您需要更具体地访问.popover-title，您可能需要将父元素添加到CSS：

.popover .popover-title {
    font-size: 15px;
}

3）（最后的手段？）覆盖！！important以确保您的样式优先：

.popover .popover-title {
    font-size: 15px !important;
}

Answer 2

为了能够缩小字体大小，最简单的方法是在应用于文本的css类中添加font-size属性（您可以通过右键单击 - >浏览器中的inspect元素找到该属性）。

至于弹出右侧而不是上方的弹出窗口，只需更改即可

placement: top

至

placement: right