株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

21-13)　1.　透過画像で作る固定位置のﾂｰﾙﾁｯﾌﾟ

　

ツールチップ部をｃｓｓで装飾する

動作；　ツールチップはテキストや画像（#info_2113 a）の上に
　　　　　マウスカーソルを重ねた（.mouseover(function()）時に、
　　　　　吹き出しのように補足のテキストを表示（.fadeIn()）します。
　　　　　今回はリンク（アンダーバー付文字列）にカーソルを重ねます。
　　　　　マウスアウト（ .mouseout(function(){）時に吹き出し表示をクリア（.fadeOut()）する。

jQueryの書き方 /*------------------------------------ */
//21-13)　2.　透過GIFで作る固定位置のﾂｰﾙﾁｯﾌﾟ　s3-5-2
/*------------------------------------ */
//初期処理
$("#info_2113 div.tooltip").css("opacity","0.9").hide();
//選択処理
$("#info_2113 a")
.mouseover(function(){
$("#info_2113 div.tooltip").fadeIn().css({
"top":$(this).offset().top-450+"px",
"left":$(this).offset().left+$(this).width()-160+"px"
});
})
.mouseout(function(){
$("#info_2113 div.tooltip").fadeOut();
});
ｃｓｓの書き方 /*-------------------------------------------------------
21-13)　透過GIFで作る固定位置のﾂｰﾙﾁｯﾌﾟ
-------------------------------------------------------- */
#info_2113{
width:600px;
}
#info_2113 a{
color:#FF9900;
}
#info_2113 h1{
width:80%;
margin:10px auto;
}
#info_2113 p{
position:relative;
margin:10px 10%;
}
#info_2113 div.tooltip{
width:230px;
position:absolute;
}
#info_2113 div.tooltip p{
line-height:1.5;
margin:0;
font-size:small;
background:url("../images/ani_tooltipBody.gif") top right;
padding:10px 5px 0 40px;
}
#info_2113 div.tooltip img{
vertical-align:top;
}
HTMLの書き方 <div id="info_2113">
<p>
シンプル セレクターは、文字列　・・・
</p>
<p>
実際のデータを表示するより　文字列　・・・
<a href="https://www.inex.co.jp/index.html">tooltip sample</a>
</p>

<div class="tooltip">
<p>株式会社アイネックスは<br />文字列　・・・</p>
<img src="../images/ani_tooltipFoot.gif" alt=" " />
<p>文字列　・・・</p>
</div>
</div>

ツールチップ　サンプル

シンプル セレクターは、HTML 要素タイプだけで構成するか、HTML 要素タイプの直後に単一 ID、1 つ以上のクラス、および 1 つの擬似クラスを任意に (任意の順序で) 組み合わせて指定して構成します。ユニバーサル セレクター (*) も、ページ内のすべて要素に適用されますが、シンプル セレクターと見なされます。 セレクターがページ内の要素と一致した場合、一致した要素に、そのセレクターに関連付けられているスタイル ルールが適用されます。 複数のシンプル セレクターは、セレクター相互の関係を示す文字によって一緒にチェーン化することができます。このような文字は、シンプル セレクター相互のコンテキスト上の関係、 tooltip sample つまり、子孫、子、および直前直後の兄弟などといった関係を指定します。以下のスタイル ルールでは、ドキュメント ツリー内で最上位の見出しが相互に隣接して表示される場合、 見出しの間のスペース量を減らします。 スタイル シートのサイズを小さくするには、複数のセレクターをコンマ区切りのリストにグループ化することができます。コンマ文字を使用すれば、1 つの宣言ブロックを複数の要素タイプに簡単に適用することができます。

実際のデータを表示するよりも早くて簡単です。また、データ ソースには新しいデータが含まれていないこと、またはデータがまったく含まれていないことがあるため、 データ ビューの変更中にサンプル データを表示する場合があります。Microsoft Expression Web を使用すると、データ ビューにサンプル データを簡単に表示できます。

株式会社アイネックスは
Web制作の現場で使えるjQuery
UIデザイン入門を活用した
サンプルプログラムを提供します。