44

を使用してツールチップのスタイルを設定しようとしています

.tooltip-inner{}

しかし、ツールチップの小さな矢印のスタイルを設定する方法が見つからないため、問題が発生しています。

スクリーンショットに示すように、ツールチップの矢印は黒です。それに新しい色を追加したい:

ここに画像の説明を入力 なにか提案を？

4

10 に答える 10

48

これを使用して、ツールチップの矢印の色を変更できます

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #000000; /* black */
  border-width: 0 5px 5px;
}
于 2013-03-13T11:11:51.387 に答える
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
}
于 2013-05-30T15:17:23.037 に答える
13

私はあなたのためにフィドルを作成しました。

を見てみましょうhere

<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;
}
于 2013-03-13T11:16:59.103 に答える
8

各方向矢印 (左、右、上、下) をスタイリングするには、CSS 属性セレクターを使用して各矢印を選択し、個別にスタイルを設定する必要があります。

トリック:上の矢印は、上側のみ境界線の色を持ち、他の 3 つの側は透明にする必要があります。他の方向矢印も、この方法でスタイルを設定する必要があります。

ワーキング 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; }
于 2016-07-09T07:34:01.107 に答える
2

ツールチップの色だけをスタイルしたい場合は、次のようにします。

.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; }
于 2015-03-11T22:30:22.740 に答える
0

これを解決するために何度も試行錯誤し、上記のオプションのいずれも機能しない場合は、.tooltip とブートストラップおよび jqueryの名前空間の競合が発生している可能性があります。

修正方法については、この回答を参照してください: jQueryUI Tooltips are conflict with Twitter Bootstrap

于 2014-09-29T18:37:46.460 に答える
-2

「display: none;」を追加できます。.tooltip-arrow クラスへ

.tooltip-arrow {
   display: none;
}
于 2014-07-10T14:30:35.313 に答える