ツールチップ「balloon.css」の吹き出しの色をカスタマイズする方法

文字やボタンにマウスオーバーするとニョキっとでてくるツールチップ(吹き出し)を作成することのできるballoon.css。とっても便利なCSSライブラリです。

しかしballoon.cssのツールチップの色はデフォルトで真っ黒なのでこのままだとちょっと使いにくい。今回はツールチップの色を変更する方法を備忘録として残していきます。

[スポンサーリンク]

balloon.cssの使い方

使い方はこちらの本家サイトを参照して下さい。

基本的にこのようにCSSを読み込んで、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.4.0/balloon.min.css">

こちらのような記述をすればツールチップは表示されます。

<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button>

こちらは実際にballoon.cssを使ってツールチップを表示させてみました。
マウスオーバー時に上下左右へツールチップを表示させるようにしています。

See the Pen balloon.css-default by morinkey (@morinkey) on CodePen.

ツールチップは表示されましたが、デフォルトだと色が真っ黒ですね。

これではちょっと使える場面が限られてきますね。

これより以降でこの色を変えていきます。

ツールチップの色を変更する

変更方法ですが、balloon.cssのCSSは触らずに自前でCSSを用意して色を上書きしていくイメージで変更していきます。

色は16進数ではなく、rgbaで表記していきます。

balloon.cssで定義されているrgba部分の色を変更していきます。

では、まずは自前のCSSファイルへ以降を追記していきましょう。

まずは吹き出しの本体(▼ではないところ)の色を変更します。

[data-balloon]:after {
    background: rgba(0,177,187,1) !important;
}

続いて、ツールチップの▼の部分の色を変更していきます。
こちらのコードでは上下左右の▼の色を変更しています。
色を変更するには、rgbaで下のコードを検索して色を変更して下さい。

[data-balloon]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(0,177,187,1)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") !important;
    background-size: 100% auto !important;
}

[data-balloon][data-balloon-pos='down']:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(0,177,187,1)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") !important;
    background-size: 100% auto !important;
}

[data-balloon][data-balloon-pos='left']:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(0,177,187,1)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") !important;
    background-size: 100% auto !important;
}

[data-balloon][data-balloon-pos='right']:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(0,177,187,1)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") !important;
    background-size: 100% auto !important;
}

こちらがツールチップの色を変更した結果です。

See the Pen balloon.css-color by morinkey (@morinkey) on CodePen.

さいごに

ツールチップの背景色を変更すると使える場面がグッと幅が増えました。

balloon.cssはJavaScriptいらずなので使い勝手は良いので個人的には結構重宝しているライブラリです。

色も簡単に変更することができるのでもっと流行ってくれれば嬉しいなと思っています。

それでは!