logo标签列表

在 Bootstrap 工具提示中设置箭头样式

csstwitter-bootstraptooltip
48

我正在尝试使用CSS样式化工具提示

.tooltip-inner{}

但我遇到了麻烦，因为我找不到如何样式化工具提示小箭头。

正如屏幕截图所示，工具提示的箭头是黑色的，我想在上面添加新颜色：

输入图像描述 有什么建议吗？

1
您需要提供更多细节，可能还需要举例说明您的问题以及您已经尝试过的解决方法的解释。 - John
1
@Morpheus 我不行，当鼠标悬停时工具提示会淡出。 - itsme
2
为什么这个问题在此之后才被提出，但却被标记为重复，而另一个问题却没有？ - Anupam
10个回答
47
你可以使用这个来更改工具提示箭头的颜色。
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000; /* black */
  border-width: 0 5px 5px;
}
+1 用于检索类，现在..如何使它成为不同的颜色？我尝试了背景和颜色CSS规则，但似乎它们都不起作用。 - itsme
3
你只需要将 border-bottom-color 改为另一种颜色即可。 - agriboz
21
每个答案似乎都在定义或重新定义不需要的属性。你只需要：.tooltip.top .tooltip-arrow{ border-top-color: #b30838; } .tooltip.left .tooltip-arrow{ border-lef-color: #b30838; } .tooltip.bottom .tooltip-arrow{ border-bottom-color: #b30838; } .tooltip.right .tooltip-arrow{ border-right-color: #b30838; } .tooltip-inner{ background-color:#b30838; } - Jim22150
2
采纳的答案对我不起作用（至少在Bootstrap 3中不行）。需要稍微修改一下，即删除.bottom并只使用.tooltip .tootip-arrow { etc }。 - joedotnot
34

使用这个样式表来帮您入门！

.tooltip{
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0)
}
.tooltip.in{
    opacity:.8;
    filter:alpha(opacity=80)
}
.tooltip.top{
    margin-top:-2px
}
.tooltip.right{
    margin-left:2px
}
.tooltip.bottom{
    margin-top:2px
}
.tooltip.left{
    margin-left:-2px
}
.tooltip.top .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #000
}
.tooltip-inner{
    max-width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0
}
13

我已经为你创建了一个代码演示。

请查看 这里。

<p>
    <a class="tooltip" href="#">Tooltip
        <span>
            <img alt="CSS Tooltip callout"
                 src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
            <strong>Most Light-weight Tooltip</strong><br>
            This is the easy-to-use Tooltip driven purely by CSS.
        </span>
    </a>
</p>

需要翻译的内容为一个空的段落标签，里面含有一个不间断空格字符。
a.tooltip {
    outline: none;
}

a.tooltip strong {
    line-height: 30px;
}

a.tooltip:hover {
    text-decoration: none;
}

a.tooltip span {
    z-index: 10;
    display: none;
    padding: 14px 20px;
    margin-top: -30px;
    margin-left: 28px;
    width: 240px;
    line-height: 16px;
}

a.tooltip:hover span {
    display: inline;
    position: absolute;
    color: #111;
    border: 1px solid #DCA;
    background: #fffAF0;
}

.callout {
    z-index: 20;
    position: absolute;
    top: 30px;
    border: 0;
    left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
}
2
+1 你很棒！但是你能告诉我只涉及箭头样式的哪些类吗？ - itsme
请勿使用制表符来输入此昵称。这是一个图像文件，您需要根据设计创建它... - Dipesh Parmar
Fiddle显示效果不佳 http://picpaste.com/Screen_Shot_2015-08-24_at_9.38.01_AM-tlLcxVxo.png - shaheenery
@shaheenery 是的，但是如果你仔细看，有人删除了位于http://www.menucool.com/tooltip/src/callout.gif的图像。 - Dipesh Parmar
11
箭头是一个边界。 您需要根据工具提示的'data-placement'更改每个箭头的颜色。
.tooltip.top .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
  border-top-color: @color;
}
.tooltip.right .tooltip-arrow {
  border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
  border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
  background-color: @color;
}
9
为了为每个方向箭头（左、右、上和下）添加样式，我们需要使用CSS属性选择器选择每个箭头，然后对它们进行个别样式设置。 提示：顶部箭头只需在顶部边框颜色为透明，其他三面为不透明的状态。其他方向箭头也需要按此方式进行样式设置。 点击此处获取工作中的Jsfiddle链接。 以下是简单的CSS代码：
.tooltip-inner { background-color:#8447cf;}

[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}

[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}

[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}

[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }
7

您可以尝试将此代码放入主CSS中，而无需修改Bootstrap文件。这是最推荐的方法，因为如果您在将来更新Bootstrap文件时，可以保持一致性。

.tooltip-inner {
background-color: #FF0000;
}

.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;

}

请注意，此示例适用于右侧工具提示。tooltip-inner属性更改工具提示背景颜色，另一个属性更改箭头颜色。
1
如果您只想样式化工具提示的颜色，请按照以下步骤操作：
.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
1
这个对我有效！
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
如果您可以编辑您的答案并解释您展示的代码是做什么的，以及为什么/如何该代码回答了问题，那将非常有帮助。 - Lea Cohen
0
-2
您可以在 .tooltip-arrow 类中添加 'display: none;'
.tooltip-arrow {
   display: none;
}
1
当前用于此的类是.tooltip .arrow。 - Cameron Forward
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接