javascript - 不同风格的 Bootstrap 工具提示

Question

我有工具提示显示使用 data-toggle 就像在，

 <i class="fa fa-fire fa-lg" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>

我在这里设置了工具提示的样式，

.tooltip > .tooltip-inner {

padding: 15px;
font-size: 120%;
background-color: #FFEB6C;
color: #374D40;}

我希望不同地方的工具提示看起来像背景颜色不同。即我想要多种工具提示外观。但我不知道如何为每个工具提示设置自定义工具提示样式。我也无法为每个工具提示设置一个 css 类，因为没有这样的元素，我正在通过数据切换设置工具提示。

我有什么办法可以让它工作吗？谢谢。

Answer 1

很简单，我创建了一个名为 custom-tooltip 的类来保存这些 CSS 样式:

/* Tooltip */

.custom-tooltip+.tooltip>.tooltip-inner {
  padding: 15px;
  font-size: 1.2em;
  background-color: #FFEB6C;
  color: #374D40;
}


/* Tooltip on bottom */

.custom-tooltip+.tooltip.bottom>.tooltip-arrow {
  border-bottom: 5px solid #FFEB6C;
}

$('i[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom'
});

/* Tooltip */

.custom-tooltip+.tooltip>.tooltip-inner {
  padding: 15px;
  font-size: 1.2em;
  background-color: #FFEB6C;
  color: #374D40;
}


/* Tooltip on top */
.custom-tooltip+.tooltip.top>.tooltip-arrow {
  border-top: 5px solid #FFEB6C;
}


/* Tooltip on bottom */
.custom-tooltip+.tooltip.bottom>.tooltip-arrow {
  border-bottom: 5px solid #FFEB6C;
}


/* Tooltip on left */
.custom-tooltip+.tooltip.left>.tooltip-arrow {
  border-left: 5px solid #FFEB6C;
}


/* Tooltip on right */
.custom-tooltip+.tooltip.right>.tooltip-arrow {
  border-right: 5px solid #FFEB6C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<i class="fa fa-fire fa-lg custom-tooltip" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>