「easyTooltip」プラグインの使い方

初期設定では要素のtitle属性を読み込み、フェードインで表示されるツールチップに変換します。このチップは任意のスタイルに変更することができ、リンクタグでなくともどんな要素にも適用することができます。
最初のバージョンとの違いは、任意のコンテンツを入れることができるようになったことです。画像や長い文章、リンクのリストなど何でも入れられます。javascriptの変数内にhtmlを記述したくない場合でも、このプラグインを使えば、ページ上の任意の要素においてinnerHTMLを使用することができます。これにより、ページに通常通り直接htmlを記述し、要素をcssで隠したうえでマウスオーバーでツールチップを表示するようになります。

javascript

スクリプトを正常に動作させるためにを含むhtmlファイルに以下のように記述し、easyTooltip.jsと、jQueryのフレームワークを参照させます。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/easyTooltip.js"></script>

<head>タグ内にはスクリプトの機能を基本の値で初期化するため以下のような記述が含まれています。

<script type="text/javascript">
    $(document).ready(function(){
        $("works-list a.tooltips").easyTooltip();
    });
</script>

初期の設定ではツールチップは「works-list」というクラス名の要素(<ul>タグ)の「tooltips」というクラス名のリンク(<a>タグ)につきます。

スクリプトの属性を追記して以下のような値を定義することができます。

  • xOffset – カーソルからツールチップの左までの距離(px指定)。初期値は10;
  • yOffset – カーソルからツールチップの上までの距離(px指定)初期値は25;
  • tooltipId – ツールチップに任意のIDをつける際に使う。一つのページで複数のツールチップを使い、それぞれに異なるスタイルを設定する際はスタイルごとにIDをつける。IDの初期値はeasyTooltip;
  • clickRemove – 初期設定ではdefaultでマウスオーバーでツールチップが消える。クリックしてツールチップを非表示にする場合はtrueに設定する;
  • content – 初期設定では「”"」(空)で要素のtitle属性をツールチップで表示する。任意のコンテンツを表示する際はここで指定;
  • useElement – ツールチップにより複雑なhtmlを使用したいが、contentオプションに記述したくない場合は特定の要素のinnerHTMLを使う;

html

以下にhtmlの記述例を示します。

<ul class="works_list">
	<li><a class="tooltips" title="サンプル" href="#"><img alt="" src="images/thumb1.jpg" /></a>
....................</li>
</ul>

css

メインとなる「style.css」にはスクリプトに関連したスタイルが記述されています。以下のスタイルを編集します。

/* Easy Tooltip */
#easyTooltip{
    padding: 5px 10px;
    border: 1px solid #111;
    background: #0accf6;
    color: #fff;
    font-size: 11px;
    text-transform: none;
}
/* // Easy Tooltip */

easyTooltipというIDのスタイルでツールチップの見た目を定義しています。


Comments are closed.