ブラウザのデフォルトツールチップをまねる

最初の2つの画像は、ブラウザのデフォルト・ツールチップを表示し、最後の2つは jQuery Tools のツールチップを表示します。 ここでは、標準的なブラウザの動作をまねしてみたいと思います。

 

スタンドアロン デモ

それで、ここでの全ポイントは何でしょうか？ まず第1に、ツールチップの双方を有効にするために似たような構文を持っています。 JavaScriptを有効にしていないブラウザでは、常にデフォルトのツールチップが表示されます。 第2に、ブラウザのツールチップは、常に最高のものとは限りません。 ブラウザのデフォルト・ツールチップで実現することはできない、jQuery Tools のツールチップの主な利点は次のとおりです:

• 外観や寸法の調整ができる。
• ツールチップには任意のHTML要素を含めることができる。
• 配置を完全に制御でる。
• ツールチップ上にカーソルを移動でるので、その中のリンクやフォームを使用することができる。
• マウスをトリガ要素上へ移動する前と後に、ツールチップの表示または非表示の遅延を制御することができる。
• show/hide エフェクトを変更することができる。
• すべてはスクリプトであり、自分た自身のツールチップのプラグインを作ることさえでる。

HTML/CSS コード

HTMLの構造は、基本的なセットアップと同じです。 ここに、単一のツールチップの要素があります。このスタイルの設定方法は次のとおりです:

.tooltip {
    display:none;
    background-color:#ffa;
    border:1px solid #cc9;
    padding:3px;
    font-size:13px;
    -moz-box-shadow: 2px 2px 11px #666;
    -webkit-box-shadow: 2px 2px 11px #666;
}

注: 最新ブラウザ、つまりFirefox、サファリ、Konqueror、およびクロムの最新のバージョンへ、 ドロップシャドウを使用しています。

JavaScript コード

単一ののJavaScriptコールで、ツールチップを初期化します。 コンフィギュレーション·オプションをコメントしてあります:

$("img[title]:gt(1)").tooltip({
    // use div.tooltip as our tooltip
    tip: '.tooltip',

    // use the fade effect instead of the default
    effect: 'fade',

    // make fadeOutSpeed similar to the browser's default
    fadeOutSpeed: 100,

    // the time before the tooltip is shown
    predelay: 400,

    // tweak the position
    position: "bottom right",
    offset: [-50, -80]
});

$(document).ready の内部にコールを括ると、文書がスクリプトされた後でスクリプトを実行します。