更改 Bootstrap 工具提示颜色 [英] Change Bootstrap tooltip color

问题描述

我想要做的是将工具提示颜色更改为红色.但是，我还想有多种其他颜色，所以我不想简单地替换原始工具提示的颜色.

我该怎么做?

解决方案

你可以这样使用:

在 CSS 中:

.tooltip-arrow,.red-tooltip + .tooltip >.tooltip-inner {背景颜色:#f00;}

jsFiddle

---

Moeen MH:使用最新版本的引导程序，您可能需要在为了摆脱黑色箭头:

.red-tooltip + .tooltip.top >.tooltip-arrow {background-color: #f00;}

---

将此用于 Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {边框底部颜色:#f00；/* 红色的 */}

完整片段:

$(function() {$('[data-toggle="tooltip"]').tooltip()})

.tooltip-main {宽度:15px；高度:15px；边界半径:50%；字体粗细:700；背景:#f3f3f3；边框:1px 实心 #737373;颜色:#737373；边距:4px 121px 0 5px；浮动:对；文本对齐:左！重要；}.tooltip-qm {向左飘浮;边距:-2px 0px 3px 4px;字体大小:12px；}.tooltip-内{最大宽度:236 像素！重要；高度:76px；字体大小:12px；填充:10px 15px 10px 20px；背景:#FFFFFF；颜色:RGBA(0, 0, 0, .7);边框:1px 实心 #737373;文本对齐:左；}.tooltip.show {不透明度:1；}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {边框底部颜色:#f00；/* 红色的 */}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?<;/span>

<风格>.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {边框底部颜色:#f00；/* 红色的 */}</style>

What I'm trying to do is change the tooltip color to red. However, I also want to have multiple other colors so I don't simply want to replace the original tooltip's color.

How would I go about doing this?

解决方案

You can use this way:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>

And in the CSS:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

jsFiddle

---

Moeen MH: With the most recent version of bootstrap, you may need to do this in order to get rid of black arrow:

.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}

---

Use this for Bootstrap 4:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

Full Snippet:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  background: #f3f3f3;
  border: 1px solid #737373;
  color: #737373;
  margin: 4px 121px 0 5px;
  float: right;
  text-align: left !important;
}

.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}

.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgba(0, 0, 0, .7);
  border: 1px solid #737373;
  text-align: left;
}

.tooltip.show {
  opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
  /* Red */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
  .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #f00;
    /* Red */
  }
</style>

这篇关于更改 Bootstrap 工具提示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！