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

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

jQuery

21-14)　1.　透過画像で作るタイマー式のツールチップ

　

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

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

jQueryの書き方 /*------------------------------------ */
//21-14)　透過GIFで作るタイマー式のﾂｰﾙﾁｯﾌﾟ
/*------------------------------------ */
//初期処理
$("#info_2114 p.tooltip").hide();
//選択処理
$("#info_2114 a").mouseover(function(){
$("#info_2114 p.tooltip").show().css({
"top":$(this).offset().top-450+"px",
"left":$(this).offset().left+$(this).width()-150+"px"
});
})
.mouseout(function(){
setTimeout(function(){
$("#info_2114 p.tooltip").hide();
},3000);
});
ｃｓｓの書き方 /*-------------------------------------------------------
21-14)　透過画像で作るタイマー式のﾂｰﾙﾁｯﾌﾟ　
-------------------------------------------------------- */
#info_2114{
width:600px;
}
#info_2114 h1{
width:80%;
margin:10px auto;
}
#info_2114 p{
margin:10px 10%;
}
#info_2114 p.tooltip{
line-height:1.5;
color:white;
margin:0;
width:185px;
height:86px;
position:absolute;
padding : 10px 20px 20px 10px;
background:url("../images/ani_tooltip.png");
font-size:small;
}
HTMLの書き方 <div id="info_2114">
<p>
シンプル セレクターは、文字列・・・
<a href="https://www.inex.co.jp/index.html">tooltip sample</a>
文字列・・・
</p>

<p>
文字列・・・
</p>
<p class="tooltip">株式会社アイネックスは<br />文字列・・・</p>
</div>

ツールチップ　サンプル

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

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

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