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

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

jQuery

21-12) 1.個性的なツールチップ(cssで装飾するシンプルなツールチップ)

 

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

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

jQueryの書き方 /*------------------------------------ */
//21-12) cssで装飾するシンプルなツールチップ -->
/*------------------------------------ */
//初期処理
$("#info_2112 span.tooltip").css({
  opacity:"0.9",
  position:"absolute",
  display:"none"
});
//選択処理
$("#info_2112 a")
  .mouseover(function(){
    $("#info_2112 span.tooltip").fadeIn();
  })
  .mouseout(function(){
    $("#info_2112 span.tooltip").fadeOut();
  })
    .mousemove(function(e){
    $("#info_2112 span.tooltip").css({
    "top":e.pageY-320+"px",
    "left":e.pageX-170+"px"
  });
});
cssの書き方 /*--------------------------------------------
21-12) cssで装飾するシンプルなツールチップ
---------------------------------------------- */
#info_2112{
}
#info_2112 a{
  color:#00CCFF;
}
#info_2112 h1{
  width:80%;
  margin:10px auto;
}
#info_2112 p{
  margin:10px 10%;
}
#info_2112 span.tooltip{
  line-height:1.5;
  color:white;
  width:200px;
  background:#FF9900;
  border:2px solid white;
  padding:1em;
  font-size:small;
}
HTMLの書き方 <div id="info_2112">
<p>
  シンプル セレクターは、<br />
  文字列1 ・・・<br />
  <a href="https://www.inex.co.jp/index.html">tooltip sample</a>
  <span class="tooltip">株式会社アイネックスは<br />
  <strong>Web制作の現場で使えるjQuery<br />
  UIデザイン入門を  活用した</strong><br />
  サンプルプログラムを提供します。 </span>
  </p>
</div>

ツールチップ サンプル

シンプル セレクターは、HTML 要素タイプだけで構成するか、HTML 要素タイプの直後に単一 ID、1 つ以上のクラス、および 1 つの擬似クラスを任意に (任意の順序で) 組み合わせて指定して構成します。ユニバーサル セレクター (*) も、ページ内のすべて要素に適用されますが、シンプル セレクターと見なされます。 セレクターがページ内の要素と一致した場合、一致した要素に、そのセレクターに関連付けられているスタイル ルールが適用されます。 複数のシンプル セレクターは、セレクター相互の関係を示す文字によって一緒にチェーン化することができます。このような文字は、シンプル セレクター相互のコンテキスト上の関係、 tooltip sample 株式会社アイネックスは
Web制作の現場で使えるjQuery
UIデザイン入門を活用した

サンプルプログラムを提供します。
つまり、子孫、子、および直前直後の兄弟などといった関係を指定します。以下のスタイル ルールでは、ドキュメント ツリー内で最上位の見出しが相互に隣接して表示される場合、 見出しの間のスペース量を減らします。 スタイル シートのサイズを小さくするには、複数のセレクターをコンマ区切りのリストにグループ化することができます。コンマ文字を使用すれば、1 つの宣言ブロックを複数の要素タイプに簡単に適用することができます。