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

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

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

sample

デモ

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

cap008

実装方法

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

balloon.cssを読み込みます。

<link href="css/balloon.css"/ rel="stylesheet">

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

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

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

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

ツールチップの表示位置

ツールチップの表示位置は、カスタムデータ属性の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で指定します。

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

デフォルトは一行表示です。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

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

  • Posted on
  • Updated on
  • Views 1,046