如何自定义引导工具提示弹出窗口的文本字体大小？

Question

我有这个弹出窗口，当您将鼠标悬停在上面时，它会告诉您信用卡的CVV代码在哪里，问题是文本默认值太大，我似乎找不到缩小它的位置。

我的html是：

 <div
     class="sprite_icons icon_creditcard_code"
     data-trigger="hover"
     aria-hidden="true"
     data-toggle="popover"
     data-placement="right"
     title="Security Code"
     data-content="This is the text I want to change i'ts really long, longer than this. 
     >
</div>

尽管我认为如果添加CSS类将无法正常工作，但我会向您展示以防万一：

.sprite_icons {
    float: left;
    background-image: url(/static/img/sprite_icons.png);
    background-repeat: no-repeat;
}

.icon_creditcard_code {
    width: 32px;
    height: 20px;
    background-position: -64px -104px;
}

Answer 1

您可以通过更改工具提示类正在使用的.tooltip类的font-size大小来修改文本大小。

例：

.tooltip{
   font-size: 3rem;
}

Answer 2

这是我的解决方案，请查看下面的实时示例：

 $('[data-toggle="popover"]').popover({ html: true, content: function() { return '<div><img src="' + $(this).data('img') + '" />' + "<p class='icon_creditcard_code'>This is the text I want to change i'ts really long, longer than this</p>" + '</div>'; } }); 

 .icon_creditcard_code { font-size: 0.9em; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <a href="#" data-toggle="popover" data-trigger="hover" aria-hidden="true" data-placement="right" title="Security Code" class="btn btn-success sprite_icons icon_creditcard_code" data-img="//placehold.it/50/09f/fff.png?text=sprite_icons">CVV code</a>