jQueryで簡単に吹き出しをポップアップ

2013/07/30

マウスオーバーで吹き出しをポップアップ

概要

jquery.balloon.jsを使用して、マウスオーバーで吹き出しを簡単にポップアップで表示する方法の紹介です。
このjQueryプラグインは、シンプルでとても簡単に設置することができます。
また、カスタマイズも容易にできるためおすすめです。

当記事では、初めにサンプルコードを掲載し、各オプションの設定方法について説明していきます。

  1. サンプルコード
  2. 設定オプションのまとめ

サンプルコード

jquery.balloon.js Demo pageよりjquery.balloon.jsを取得します。

取得したjsファイルとjQueryを読込みます。


<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.balloon.js"></script>

以下のようにJavaScriptを記述します。


$(function() {
	$('.help').balloon();
	$('.help1').balloon({ position: "right" });
	$('.help2').balloon({ position: "bottom right" });
});

以下のようにHTMLを記述します。


<ul>
<li><a href="#" class="help" title="サンプルです。<br />デフォルトでは上に表示されます。">サンプル1</a></li>
<li><a href="#" class="help1" title="サンプルです。<br />右側に表示します。">サンプル2</a></li>
<li><a href="#" class="help2" title="サンプルです。<br />右下に表示します。">サンプル3</a></li>
</ul>

たったこれだけで設置完了です。

設定オプションのまとめ

jQueryの設定は基本的に以下のように指定します。

$('selectors').balloon(options);

ここで設定できるオプションについて紹介していきます。
各オプションは、カンマで区切ることで複数設定できます。

position


$('selectors').balloon({ position: "right" });

positionを記述することで、吹き出しの位置を指定することができます。
positionでは以下のものを設定することができます。

top left (左上)
top (上)
top right (右上)
left (左)
null (中央)
right (右)
bottom left (左下)
bottom (下)
bottom right (右下)

offsetX,offsetY


$('selectors').balloon({ offsetX: -10, offsetY: -5 });

これらを使用することで、表示位置の細かい位置の調整を行うことができます。
offsetXは横方向、offsetYでは縦方向を指定します。

contents


$('selectors').balloon({
  contents: '<a href="#">Any HTML!</a><br />'
    +'<input type="text" size="40" />'
    +'<input type="submit" value="Search" />'
});
$('selectors').balloon({ contents: $('h1').clone() });

HTMLコードを記述して表示させることができます。
また、2つめの例のようにjQueryを使用して表示させることも可能です。

tipSize


$('selectors').balloon({ tipSize: 50 });
$('selectors').balloon({ tipSize: 0 });

吹き出しの付け根の部分の大きさを指定することができます。

CSS


$('selectors').balloon({
  tipSize: 24,
  css: {
    border: 'solid 4px #5baec0',
    padding: '10px',
    fontSize: '150%',
    fontWeight: 'bold',
    lineHeight: '3',
    backgroundColor: '#666',
    color: '#fff'
  }
});

cssを指定することで、CSSを設定することができます。
吹き出しのデザインを個別に変更することができます。

minLifetime


$('selectors').balloon({ minLifetime: 2000 });
$('selectors').balloon({ minLifetime: 0 });

マウスが離れた後に、吹き出しを表示する時間を指定できます。
単位はミリ秒で指定します。たとえば、2000とした場合、マウスが離れた後も2秒吹き出しが表示され続けます。

showDuration, hideDuration


$('selectors').balloon({
  showDuration: 1000, hideDuration: 500
});
$('selectors').balloon({
  showDuration: 500, hideDuration: 0
});

表示、非表示のスピードを調整することができます。
単位はミリ秒で指定します。

showAnimation, hideAnimation


$('selectors').balloon({
  showDuration: "slow",
  showAnimation: function(d) { this.fadeIn(d); }
});
$('selectors').balloon({
  hideDuration: "slow",
  hideAnimation: function(d) { this.slideUp(d); }
});

アニメーションを設定することができます。
通常、Durationと共に設定を行います。

url, ajaxComplete


$('selectors').balloon({
  position: 'right',
  url: '/'
});

urlを指定することで、記述したパスのページを表示することができます。

  • このエントリーをはてなブックマークに追加
Related

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る