画像に複数のツールチップを追加する「PicTip」

「PicTip」は画像やスライドショー、スライダーに複数のツールチップを表示することを実現するjQueryプラグインです。

「PicTip」

2013-07-06 0.56 のイメージ

面白いプラグインですね。画像内にいくつでも、好きな位置にツールチップを配置することができます。メッセージを入れても面白いですし、広告なども入りそうですね。

画像内に表示されている緑の点がツールチップのトリガーポイントになります。以下の画像には3つ配置しています。

2013-07-06 1.01 のイメージ

 

ここをクリックするとこのようにツールチップが表示されます。

2013-07-06 1.03 のイメージ

 

それでは実装方法をご紹介します。まずはjQuery、prettify含む、外部ファイルを読み込みます。

<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/pictip.css">
<script src="js/vendor/prettify.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.pictip.min.js" ></script>

 

HTMLはこのようにマークアップします。

<div id="pictip-demo">
  <img src="img/sunset.JPG">
</div>

 

JavaScriptはこのように実装します。それぞれtopとleftでトリガーポイントを決めます。タグを差し込むので色々なツールチップが作れそうですね。

prettyPrint();
$("#pictip-demo").pictip({
  spots: [
    {top: '75px', left: '25px', content: '<p>Nice Mountain!</p>', tooltipPosition:'br'/*, tooltipClose: true*/},
    {top: '175px', left: '125px', content: '<p>Get into the water!</p>', tooltipPosition:'tr'},
    {top: '65px', left: '165px', content: '<p>Perfect sunset!</p>', tooltipPosition:'bl'}
  ],
  onShowToolTip: function(spot, tooltip){},
  onCloseToolTip: function(spot, tooltip){
  }
});
var pictip = $("#pictip-demo").data('pictip');

 

工夫すれば面白い表現ができそうです。参考にどうぞ。

 

Home > JavaScript > 画像に複数のツールチップを追加する「PicTip」

Return to page top