シンプルなツールチップを表示する軽量jQueryプラグイン『tinyTips』

シンプルでいい感じのツールチップを表示することができるjQueryプラグインです。

** [2015/12/20追記] Ver2になってた。もうこの記事は役に立たない。 http://www.tipue.com/tipr/ **

使い方

jQueryスクリプト と CSS と 画像を読みこんだら以下のようなソースを書く

$(document).ready(function(){
  // セレクタ
  $('.tinytips').tinyTips(
    // デザイン
    'light',
    // 対象属性
    'title'
  );
});

<a href="http://itunes.apple.com/jp/app/color-labyrinth/id451036454"><img class="tinytips" src="http://fernweh.jp/i/2010-2014/11/color-lobyrinth.jpg" alt="「title」属性の中身が表示される" title="「title」属性の中身が表示される" /></a>

※参考サイト : jQuery利用の軽量吹き出しJavaScript「tinyTips」|skuare.net

CSS でデザインを設定する

ツールチップのデザインはCSSで簡単に変更できる。

このサイトではこの記事を書いた時点ではこんな感じ。

.lightTip {
  width: 382px;
}
.lightTip .content {
  width: 350px;
  padding: 10px;
  border: 6px solid #e2e2e2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #ffffff;
  color: #333;
  font-size:1.4em;
}
.lightTip .bottom {
  height: 14px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAOCAYAAADT0Rc6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIZJREFUeNq8zc0JwDAIBlDrrWv1VuhmWafnQFfJErnWQChS8qNprPAF1OBbQggrAJyUDezrouxIT6QcFP8HmDzMA2v4AVODbGEFew6+UQvY53uRD7HwcRZcBGvoDLgKttAvcBPsoSNwF5SgGlgESlEJLAY1aAtWgVq0BKvBEZTDbgRMdQswABR4N/Gdt6lxAAAAAElFTkSuQmCC) top center no-repeat;
}

画像はアップロードがメンドウだったので Data URI Scheme にしといた。

その他、詳細はjQuery Plugin: TinyTips 1.1 | | Minnesota Freelance Website Designer & Developer | Mike Merrittを参照のコト

Share
関連記事