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

【问题标题】：How can I customize the text font size of my bootstrap tooltip popover?如何自定义引导工具提示弹出框的文本字体大小？
【发布时间】：2019-02-19 12:54:19
【问题描述】：

我有这个弹出框，当您将鼠标悬停在它上面时，它会告诉您信用卡的 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;
}

【问题讨论】：

标签： javascript html css twitter-bootstrap popover

【解决方案1】：

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

例子：

.tooltip{
   font-size: 3rem;
}

【讨论】：

【解决方案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>

【讨论】：