如何设置bootstrap 4的工具提示[重复]

Posted 2021-04-23

这个问题在这里已有答案：

• Styling a tooltip (popper.js / bootstrap v4 beta) 2回答

我想设计我的bootstrap 4 tool-tip。我想改变它的背景颜色，高度，宽度和边框。根据我的说法，我没有找到任何方式来设计它。

这是我的html

<i class="fa fa-question-circle "href="#" data-toggle="tool-tip" title="Cover for any accidental loss or damage to the vehicle caused by natural calamities such as floods, storms, earthquakes, etc." aria-hidden="true"> </i>

工具提示工作正常，但我无法设计它。

答案

查看以下具有不同样式的示例：

HTML：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Default">Default</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="primary" title="Primary">Primary</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="info" title="Info">Info</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="success" title="Success">Success</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="warning" title="Warning">Warning</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="danger" title="Danger">Danger</button>

CSS：

.tooltip.primary .tooltip-inner          { background-color:    #337ab7; }
.tooltip.primary.top > .tooltip-arrow    { border-top-color:    #337ab7; }
.tooltip.primary.right > .tooltip-arrow  { border-right-color:  #337ab7; }
.tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; }
.tooltip.primary.left > .tooltip-arrow   { border-left-color:   #337ab7; }

.tooltip.info .tooltip-inner          { background-color:    #31b0d5; }
.tooltip.info.top > .tooltip-arrow    { border-top-color:    #31b0d5; }
.tooltip.info.right > .tooltip-arrow  { border-right-color:  #31b0d5; }
.tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; }
.tooltip.info.left > .tooltip-arrow   { border-left-color:   #31b0d5; }

.tooltip.success .tooltip-inner          { background-color:    #449d44; }
.tooltip.success.top > .tooltip-arrow    { border-top-color:    #449d44; }
.tooltip.success.right > .tooltip-arrow  { border-right-color:  #449d44; }
.tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; }
.tooltip.success.left > .tooltip-arrow   { border-left-color:   #449d44; }

.tooltip.warning .tooltip-inner          { background-color:    #ec971f; }
.tooltip.warning.top > .tooltip-arrow    { border-top-color:    #ec971f; }
.tooltip.warning.right > .tooltip-arrow  { border-right-color:  #ec971f; }
.tooltip.warning.bottom > .tooltip-arrow { border-bottom-color: #ec971f; }
.tooltip.warning.left > .tooltip-arrow   { border-left-color:   #ec971f; }

.tooltip.danger .tooltip-inner          { background-color:    #d9534f; }
.tooltip.danger.top > .tooltip-arrow    { border-top-color:    #d9534f; }
.tooltip.danger.right > .tooltip-arrow  { border-right-color:  #d9534f; }
.tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; }
.tooltip.danger.left > .tooltip-arrow   { border-left-color:   #d9534f; }

这是完整的工作代码：

https://codepen.io/anon/pen/pVGKpW