ボタンにホバーするとツールチップを表示するCSS Balloon.css

Balloon.cssはボタンにホバーするとツールチップを表示するCSSです。

JavaScriptを使わず、CSSだけで実装できるのが特徴です。

sample

人気の記事

CSSだけでツールチップを実装できる「Wenk.css」(超軽量)
CSSだけでツールチップを実装できる「Wenk.css」(超軽量)
スポンサーリンク

デモ

デモページを用意しました。

cap008

実装方法

CSSだけなので実装もとてもシンプルです。

balloon.cssを読み込みます。

後は、ボタンを表示するだけです。カスタムデータ属性のdata-balloonでツールチップに表示する文章を、data-balloon-posで表示位置を指定します。

もちろん、<span>など、<button>要素以外にも実装できます。

ツールチップの表示位置

ツールチップの表示位置は、カスタムデータ属性のdata-balloon-posで指定します。up、down、left、rightで上下左右から選べます。

  • data-balloon-pos=”up” →上
  • data-balloon-pos=”down” →下
  • data-balloon-pos=”left “ →左
  • data-balloon-pos=”right” →右

ツールチップの横幅

ツールチップの横幅は、カスタムデータ属性のdata-balloon-lengthで指定します。

デフォルトは一行表示です。small、medium、large、xlargeを指定すると、横幅が変わります。fitを指定すると、要素(ボタン)の横幅に合わせて表示することが可能です。

1. 指定なし →一行表示(デフォルト)
cap002

2. data-balloon-length=”small” →小
cap003

3. data-balloon-pos=”medium” →中
cap004

4. data-balloon-pos=”large “ →大
cap005

5. data-balloon-pos=”xlarge” →もっと大
cap006

6. data-balloon-pos=”fit” →要素(ボタン)の横幅にフィット
cap007

スポンサーリンク
Balloon.css – ボタンにホバーするとTipsを表示するCSS

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.03.18
  • Views 749