Html 更改 Bootstrap 工具提示颜色

Question

提问by John Smith

What I'm trying to do is change the tooltipcolor 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?

我该怎么做呢？

Answer 1

回答by Praveen Kumar Purushothaman

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:

在 CSS 中：

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

jsFiddle

js小提琴

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

Moeen MH：使用最新版本的引导程序，您可能需要这样做才能摆脱黑色箭头：

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

Use this for Bootstrap 4:

将此用于 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: rgb(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>

Answer 2

回答by technoTarek

Bootstrap 2

引导程序 2

If you want to change the caret/arrow as well, do the following:

如果您还想更改插入符号/箭头，请执行以下操作：

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

or

或者

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

jsFiddle: http://jsfiddle.net/technotarek/2htZe/

jsFiddle：http: //jsfiddle.net/technotarek/2htZe/

UPDATE: Bootstrap 3

更新：引导程序 3

You have to be specific for the direction of the tooltip in Bootstrap 3. For example:

您必须特定于 Bootstrap 3 中工具提示的方向。例如：

.tooltip.top .tooltip-inner {
    background-color:red;
}
.tooltip.top .tooltip-arrow {
      border-top-color: red;
}

jsFiddle for all tooltip directions using Bootstrap 3: http://jsfiddle.net/technotarek/L2rLE/

jsFiddle 使用 Bootstrap 3 获取所有工具提示方向：http: //jsfiddle.net/technotarek/L2rLE/

Answer 3

回答by Tuyen Cao

The only way working for me:

对我有用的唯一方法：

$(document).ready(function() {
  //initializing tooltip
  $('[data-toggle="tooltip"]').tooltip();
});

.tooltip-inner {
  background-color: #00acd6 !important;
  /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6;
}

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!--Tooltip Example-->
<div style="padding:50px;">
  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>

Answer 4

回答by GOTOLR

For bootstrap4 I used code:

对于 bootstrap4，我使用了代码：

.tooltip-inner {
  background-color: #color !important;
  color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #color !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #color !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #color !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #color !important;
}

Answer 5

回答by Julior

Here is tooltip code in boostrap...

这是boostrap中的工具提示代码...

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

Answer 6

回答by zvictor

For the arrow color, you can use this:

对于箭头颜色，您可以使用：

.tooltip .tooltip-arrow {border-top: 5px solid red !important;}

Answer 7

回答by Eric Grotke

Important to note, as of Bootstrap 4 you can customize these styles directly in your Bootstrap Sass variables file, so in _variables.scss you have these options:

需要注意的是，从 Bootstrap 4 开始，您可以直接在 Bootstrap Sass 变量文件中自定义这些样式，因此在 _variables.scss 中您有以下选项：

//== Tooltips
//
//##

// ** Tooltip max width
$tooltip-max-width:           200px !default;
// ** Tooltip text color
$tooltip-color:               #fff !default;
// ** Tooltip background color
$tooltip-bg:                  #000 !default;
$tooltip-opacity:             .9 !default;

// ** Tooltip arrow width
$tooltip-arrow-width:         5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color:         $tooltip-bg !default;

See here: http://v4-alpha.getbootstrap.com/getting-started/options/

请参阅此处：http: //v4-alpha.getbootstrap.com/getting-started/options/

Best to work in Sass and compile as you go with Grunt or Gulp build tools.

最好在 Sass 中工作并使用 Grunt 或 Gulp 构建工具进行编译。

Answer 8

回答by Dreal

my jQuery fix:

我的 jQuery 修复：

HTML:

HTML：

   <a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
       <span class="glyphicon glyphicon-question-sign"></span>
   </a>

jQuery:

jQuery：

$('[data-toggle="tooltip"]').hover(function(){
    $('.tooltip-inner').css('min-width', '400px');
    $('.tooltip-inner').css('color', 'red');
});

Answer 9

回答by Akther Hussain

You can use this to solve your problem. I checked it in my project and it works fine.

您可以使用它来解决您的问题。我在我的项目中检查了它，它工作正常。

<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
    .media-tooltip + .tooltip .tooltip-inner {
        font-size: 14px; 
        font-weight: 700;
        color: rgb( 37, 207, 187 ); 
        border-width: 1px;
        border-color: rgb( 37, 207, 187 );
        border-style: solid;
        background-color: rgb( 219, 242, 239 );
        padding: 10px;
        border-radius: 0;
    } 
    .media-tooltip + .tooltip > .tooltip-arrow{display: none;}
    .media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
         bottom: 89%;
         left: 50%;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
    }

    .media-tooltip + .tooltip .tooltip-inner:after {
        border-color: rgba(219, 242, 239, 0);
        border-bottom-color: #dbf2ef;
        border-width: 10px;
        margin-left: -10px;
    }
    .media-tooltip + .tooltip .tooltip-inner:before {
        border-color: rgba(37, 207, 187, 0);
        border-bottom-color: #25cfbb;
        border-width: 11px;
        margin-left: -11px;
    }

Answer 10

回答by Paulo Borralho Martins

This is already been answered right but i think i should give my opinion too. Like cozen says this is a border, and for it to work you must specify the classes to format this in the same way that bootstrap specifies it. So, you can do this

这已经得到了正确的回答，但我想我也应该给出我的意见。就像 cozen 说这是一个边框，为了让它工作，你必须指定类来格式化它，就像引导程序指定它的方式一样。所以，你可以这样做

.tooltip .tooltip-inner {background-color: #00a8c4; color: black;} 
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}

or you can do the next one, just for the tooltip-arrow but you must add the !important, so that it overwrites the bootstrap css

或者你可以做下一个，只是为了工具提示箭头，但你必须添加！important，以便它覆盖引导 css

.tooltip-arrow {border-top-color: #00a8c4!important;}

Html 更改 Bootstrap 工具提示颜色

提问by John Smith

回答by Praveen Kumar Purushothaman

回答by technoTarek

回答by Tuyen Cao

回答by GOTOLR

回答by Julior

回答by zvictor

回答by Eric Grotke

回答by Dreal

回答by Akther Hussain

回答by Paulo Borralho Martins

相关推荐

最近更新

标签

Html 更改 Bootstrap 工具提示颜色

提问by John Smith

回答by Praveen Kumar Purushothaman

回答by technoTarek

回答by Tuyen Cao

回答by GOTOLR

回答by Julior

回答by zvictor

回答by Eric Grotke

回答by Dreal

回答by Akther Hussain

回答by Paulo Borralho Martins

相关推荐

Html 添加div标签时如何将文本全部放在同一行？

Html 从 Knockout.JS 中的数组中删除特定元素

Html 使文本输入字段看起来被禁用，但只读

Html 100% 宽度减去边距和填充

相关推荐

最近更新

标签