ここを見れば欲しいツールチップが必ずある!「qTip2」

「qTip2」はシンプルなものからリッチなものまで、そして様々なアニメーションが組み込まれたツールチップのライブラリサイトです。

qTip2

qTip2

 

いやーこれだけツールチップだけで揃っていると、望むものは必ず見つけられそうです。シンプルなものでも、カラーや、フラット or リッチなものまで、画像に複数のツールチップを差し込むことも可能ですし、以下の画像のようにカレンダーと組み合わせても面白いですね。

 qTip2-demo-5

 

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

<link type="text/css" rel="stylesheet" href="//qtip2.com/v/stable/jquery.qtip.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//qtip2.com/v/stable/jquery.qtip.min.js"></script>

 

次にHTMLをマークアップ。今回はDemoのためにこのようにしました。

<p><a href="#">Hello</a></p>

 

最後にJavaScript。aタグに対してツールチップを設定しました。特にオプションもつけず、シンプルに。

$('a').qtip({ 
  content: {
    text: 'test'
  }
})

 

するとこのようにつくることができました。これは少しデザインがあれですね。。。

qTip2-sample

 

たくさんのオプションが用意されているので、組み合わせれば表現は無限大です。参考にどうぞ。

 

Home > JavaScript > ここを見れば欲しいツールチップが必ずある!「qTip2」

Return to page top