15

我正在尝试为工具提示输出各种颜色(编辑:来自 Twitter Bootstrap),但似乎我不太明白。更改默认颜色并不难,只需更改 .tooltip 及其相关定义的颜色即可。

但是假设我想更改正文中特定工具提示的颜色

<div id="users" class="row">
    <div id="photo_stack" class="span6 photo_stack">
        <img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />

一个简单的方法,如

#users .tooltip { background-color: #somecolor; }

似乎不起作用。我想这与 DOM 有关,我需要将某种类附加到特定的工具提示中?还是我完全关闭了?谢谢 :)

这是一个 JSFiddle:http: //jsfiddle.net/rZxrm/

4

6 回答 6

15

Twitter bootstrap 没有内置此功能,但您可以添加自己的函数来执行此操作,如下所示:

$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});​

然后你只需要tooltipPhoto在 CSS 中定义类以具有不同的背景颜色。

编辑:更新的解决方案:

function changeTooltipColorTo(color) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('#photo1').hover(function() {changeTooltipColorTo('#f00')});
    $('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
    $('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});
于 2012-09-28T12:44:08.247 回答
15

如果您使用工具提示,您可能希望使用内置主题颜色,即信息、成功、危险和警告。然而,Bootstrap 不支持工具提示主题(在撰写本文时为 V3),但我们可以添加几行 CSS 来实现这一点。

理想情况下,我们想要的是一组类tooltip-infotooltip-danger等等tooltip-success,您可以将它们应用于您正在调用的元素tooltip()。我将在下面给出完全符合此要求的代码,并使用 Bootstrap 3.0 进行测试。

结果

在此处输入图像描述

在此处输入图像描述

它是如何工作的

下面的代码基本上重用了警报组件的样式,因为它与工具提示非常相似。请注意,这样做几乎没有什么好处,包括不仅背景颜色会发生变化,而且文本颜色和边框颜色也会发生变化。此外,它使工具提示具有略微透明的光泽外观。工具提示中的箭头取决于边框颜色,因此可以通过继承警报组件的边框颜色来单独更改。

另请注意,这些不是全局更改。tooltip-info除非您像获得默认工具提示一样应用类。

用法

<span class="tooltip-info"  title="Hello, I'm dangerous">
    Hover here to see tooltip!
</span>

请注意,默认情况下不激活引导工具提示,因此您需要像这样激活(请参阅https://stackoverflow.com/a/20877657/207661

$(document.body).tooltip({ selector: "[title]" });

小提琴

在这里玩这个代码:http: //jsbin.com/usIyoGUD/3/edit ?html,css,output

更少的 CSS 源代码

//Import these from your own Bootstrap folder
@import  "js/ext/bootstrap/less/mixins.less";
@import  "js/ext/bootstrap/less/variables.less";

.tooltip-border-styles(@borderColor) {
    & + .tooltip {
        &.top .tooltip-arrow,
        &.top-left .tooltip-arrow,
        &.top-right .tooltip-arrow {
            border-top-color: @borderColor;
        }
        &.bottom .tooltip-arrow,
        &.bottom-left .tooltip-arrow,
        &.bottom-right .tooltip-arrow {
            border-bottom-color: @borderColor;
        }
        &.right .tooltip-arrow {
            border-right-color: @borderColor;
        }
        &.left .tooltip-arrow {
            border-left-color: @borderColor;
        }
    }
}

.tooltip-info {
  & + .tooltip .tooltip-inner {
    .alert-info;
  }
  .tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
  & + .tooltip .tooltip-inner {
    .alert-danger;
  }
  .tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
  & + .tooltip .tooltip-inner {
    .alert-warning;
  }
  .tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
  & + .tooltip .tooltip-inner {
    .alert-success;
  }
  .tooltip-border-styles(@alert-success-border);
}

编译的 CSS

如果你不使用 LESS 或者不想处理它,那么你可以直接使用下面编译的 CSS:

.tooltip-info + .tooltip .tooltip-inner {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  background-repeat: repeat-x;
  border-color: #9acfea;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
  border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
  border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
  border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  background-repeat: repeat-x;
  border-color: #dca7a7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
  border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
  border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
  border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  background-repeat: repeat-x;
  border-color: #f5e79e;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
  border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
  border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
  border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  border-color: #b2dba1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
  border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
  border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
  border-left-color: #d6e9c6;
}
于 2014-01-02T09:57:37.813 回答
14

我为您的问题找到了另一种解决方案(我试图做同样的事情)。只需更改主 CSS 样式表中的颜色(只要您的样式表在文档头部的 bootstrap 之后列出,它就会覆盖 bootstrap)。

具体来说,这是您添加到主样式表的内容(例如):

.tooltip-inner {
  background-color: #D13127;
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #D13127;
}
于 2013-04-10T19:35:10.193 回答
2

请参阅动态地将类添加到 Bootstrap 的“弹出框”容器

她的修复通过用一行修改 bootstrap.js 来允许数据类选择器

于 2012-10-22T19:41:54.103 回答
1

这是我在 sass 中的做法

  .tooltip-inner
    color: #fff
    background-color: #111
    border: 1px solid #fff

  .tooltip.in
    opacity: .9

和位置相关部分

  .tooltip.bottom .tooltip-arrow
    border-bottom-color: #fff
于 2014-01-31T19:56:46.887 回答
0

请参阅我对类似问题的回复:更改引导工具提示颜色

它适用于现有和动态创建的元素的样式工具提示,使用 Bootstrap 3 或 Bootstrap 4。

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

示例:
对于 Bootstrap 3
对于 Bootstrap 4

于 2018-06-10T21:48:50.830 回答