如何自定義引導工具提示彈出窗口的文本字體大小？

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>