ボタンにホバーするとツールチップを表示する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

関連記事

 

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

最新情報をお届けします

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Posted on
  • Updated on
  • Views 1,204