为了账号安全,请及时绑定邮箱和手机立即绑定

更改bootstrap工具提示颜色

/ 猿问

更改bootstrap工具提示颜色

冉冉说 2019-09-20 16:02:11

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


我该怎么做呢?


查看完整描述

3 回答

?
慕圣8478803

你可以这样使用:


<a href="#" data-toggle="tooltip" data-placement="bottom"

   title="" data-original-title="Tooltip on bottom"

   class="red-tooltip">Tooltip on bottom</a>

在CSS中:


.tooltip-arrow,

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

的jsfiddle


Moeen MH:使用最新版本的bootstrap,你可能需要这样做才能摆脱黑色箭头:


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

用于Bootstrap 4:


.bs-tooltip-auto[x-placement^=bottom] .arrow::before,

.bs-tooltip-bottom .arrow::before {

  border-bottom-color: #f00; /* Red */

}

完整片段:

$(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>


查看完整回答
反对 回复 2019-09-20
?
HUX布斯

Bootstrap 2


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


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

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

要么


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

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


更新:Bootstrap 3


您必须具体针对Bootstrap 3中工具提示的方向。例如:


.tooltip.top .tooltip-inner {

    background-color:red;

}

.tooltip.top .tooltip-arrow {

      border-top-color: red;

}

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


查看完整回答
反对 回复 2019-09-20
?
SMILET

对我有用的唯一方法:


$(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>


查看完整回答
反对 回复 2019-09-20

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信