は（popper.js /ブートストラップV4ベータ）

Question

私はpopper.js（tooltip.js）ライブラリーをブートストラップv4のベータ版をインストールし、それできたツールチップをスタイリング。私はそれをツールチップの機能を使用しようとしています。だから私はそれを現れさせることができたが、私の人生のためにその外観/スタイルを変えることはできない。私は彼らの文書を何度か見てきましたが、私はそれを理解できません。 （私は、例を持たないいわゆる "ドキュメンテーション"が嫌いです）。だからここ は私のhtmlです：

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span> 

私はJSのデータトグルでそれをアクティブ化：

$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 

私はツールチップが表示されたら、新しいのdivは、クラス「ツールチップを使用して作成されたことに気づきました。.. 。

.tooltip { 
    background-color: #DB2828; 
    color: $green; 
} 

なく、私の意図したスタイリングオプション、ちょうどそれが仕事を見るために試験...よく結果：」私は私が私のSCSS、そうではそのクラスとスタイル、それをターゲットと考えていたので、 10

その背後にある私のテストの背景と同じ黒の背景には...誰かが私はこれを理解することができますか？どうもありがとう。

Answer 1

ツールチップの構造がdescribed in the docsです。ブートストラップ4.0.0用

更新

Demo

.tooltip-inner { 
    background-color: #00cc00; 
} 
.tooltip.bs-tooltip-right .arrow:before { 
    border-right-color: #00cc00 !important; 
} 
.tooltip.bs-tooltip-left .arrow:before { 
    border-left-color: #00cc00 !important; 
} 
.tooltip.bs-tooltip-bottom .arrow:before { 
    border-bottom-color: #00cc00 !important; 
} 
.tooltip.bs-tooltip-top .arrow:before { 
    border-top-color: #00cc00 !important; 
} 

（#00cc00所望ツールチップの色）

Answer 2

：あなたは tooltip-inner をオーバーライドする必要がスタイルと arrow を変更するには

私の場合は、下のツールチップの代わりにこれを行う必要がありました：

.tooltip-inner { 
    background-color: $darkGrayClr; 
} 
.tooltip.bs-tooltip-bottom .arrow:before { 
    border-bottom-color: $darkGrayClr; 
}