clueTip

サンプルです。ここにマウスONしてください。

名称
clueTip 0.9.8(jQueryのプラグイン)
配布元
jQuery clueTip Plugin
必要なモジュール
jQuery v1.1.4+
備考
Ajax、Hover、Clickなどバリエーション多数。
ライセンス
GPL and MIT License

設置方法

  1. jQuery clueTip PluginをDownload
  2. head要素内に下記を記述。
    <script src="js/jquery.js" type="text/javascript"></script>
    	<script src="js/jquery.dimensions.js" type="text/javascript"></script>
    	<script src="js/jquery.cluetip.js" type="text/javascript"></script>
    	<script type="text/javascript">
    	$(function() {
    	$('a.basic').cluetip();
    	});
    	</script>
    	<link rel="stylesheet" href="css/jquery.cluetip.css" type="text/css">
    
  3. ツールチップを表示させたいa要素にclass="basic"rel="ajax.htm"を記述。
    <a class="basic" href="ajax.htm" rel="ajax.htm" title="ヘルプ">ここにマウスON</a>

つまづいたところ

Ajaxで読み込むHTMLでCSSファイルをインポートするようにしていると動作しない。

<link rel="stylesheet" href="css/style.css" media="screen,tv">

HTMLファイルのhead要素内に直接CSSを記述しても駄目でした。
解決策として、clueTipが使うjquery.cluetip.cssの中にclassやidを記述すると、問題なく動作しました。

問題点:ツールチップがselect要素に隠れてしまう(IE6)

IE6での問題です。clueTipに問題がある訳ではありません。(他のツールチップ表示プログラムでも同様の現象が起きました。)

以下のサンプルでご確認ください。
「営業エリア」のにマウスカーソルを乗せると、ツールチップが表示されます。

ツールチップがselect要素に隠れてしまうサンプル

ページトップに戻る