web-dev-qa-db-ja.com

ツールチップのスタイル設定（popper.js / bootstrap v4 beta）

bootstrap v4 betaと一緒にpopper.js（tooltip.js）ライブラリをインストールしました。ツールチップ関数を使用しようとしています。そのため、なんとか表示させることができましたが、私の人生の外観/スタイルを変更しないでください。ドキュメントを何度か調べましたが、わかりません（例のない、いわゆる「ドキュメント」は嫌いです）。これが私のhtmlです：

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

私はjsのdata-toggleでそれをアクティブにしました：

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

ツールチップが表示されると、クラス「tooltip ...」を使用して新しいdivが作成されるので、そのクラスをターゲットにして、scssでスタイルを設定できると思いました。

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

私の意図したスタイリングオプションではなく、それが機能することを確認するためにテストしただけです...結果： enter image description here

その背後にある私のテストの背景と同じ黒い背景...誰かがこれを理解するのを手伝ってくれる？どうもありがとう。

tooltipbootstrap-4popper.js
7
Alin Faur

ツールチップの構造は ドキュメントで説明されています です。スタイルを変更するには、オーバーライドする必要がありますtooltip-inner およびarrow：

Bootstrap 4.0.0の更新

デモ

.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は目的のツールチップの色です）

13
Zim

私にとっては、下部のツールチップに対して代わりにこれを行わなければなりませんでした：

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