CSSのTooltipのJavascriptのチュートリアルは、CSS |エースInfowayインドのブログを使用せずに|

CSSのTooltipのJavascriptを使用せずに

これは私がチュートリアルでは私にはどのようにジャバスクリプトこれは非常にシンプルで効果的なテクニックを使用せずにCSSのツールヒントを作成する方法が表示されます。私はこのポストをお楽しみ下さい。

ここでは、スクリーンショットです

tooltip

ステップ：1基本的なCSSコード


  ; padding : 0 ; } *（マージン：0;パディング：0;） 
  % normal  Arial, Helvetica, sans-serif ; }ボディ（フォント：100％、 通常のゴシック体、ヘルベチカ、 サンセリフ ;） 
  : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } p（ 色 ：＃666;フォントサイズ：12px;行の高さ：150％;マージン：0 0 10px 0;） 
   margin : 0 auto ; width : 550px ; } ＃ページ （マージン：0 自動 ;幅：550px;）

ここでは 、 魔法のコードです 。


 : #F00 ; font-size : 12px ; } a :hover { background : #fff ; /*background color for IE*/ text-decoration :none ; } a .tooltip span { display :none ;         padding : 5px 5px ;         margin-left : 3px ;         margin-top : 10px ;       width : 170px ;         font-size : 12px ;         line-height : 150 %; } a .tooltip :hover span { display :inline ;         position :absolute ; background : #F20F27 ;         border : 1px solid #C30018 ; color : #fff ; } （ 色 ：＃F00を 、フォントサイズ：12px;）：（ 背景 ：＃333; / IEの* /テキスト装飾用*背景色 ：なし ;）。ヒントスパンホバー （表示：なし ;パディング：5px 5px;余白左：3px;マージントップ：10px;幅：170px;フォントサイズ：12px;行の高さ：150％;）。ヒント ：ホバースパン（表示：インライン ;位置：絶対 ; 背景 ：＃ F20F27;国境：1px 固体 ＃C30018; 色 ：＃333;）

ステップ：2基本的なHTMLの構造


 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div = "page""<p> Loremイプサムかなしみamet、consecteturのadipiscing elit座るIDを 。 ユタviverra duoの当社笑い。  tortor内葉rhoncusのEUのnequeします。  interdumでLoremイプサムかなしみamet、consecteturのadipiscing elit座っている。 ユタviverra duoの当社笑い。"/ SPANは""/"Loremイプサムかなしみamet、consecteturのadipiscing elit座っている。  Suspendisse potenti.Loremイプサムかなしみ、"/ p"<p> Loremイプサムかなしみamet、consecteturのadipiscing elit座るamet座る。 ユタviverra duoの当社笑い。  tortor内葉rhoncusのEUのnequeします。  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. interdum <a href =の"#" クラス = "tooltip"で"placerat <SPAN>を Loremイプサムかなしみamet、consecteturのadipiscing elit座っている。 ユタviverra duoの当社笑い。"/ SPANは""/"Loremイプサムかなしみamet、consecteturのadipiscing elit座っている。  Suspendisse potenti.Loremイプサムかなしみ、"/ p"<p> Loremイプサムかなしみamet、consecteturのadipiscing elit座るamet座る。 ユタviverra duoの当社笑い。  tortor内葉rhoncusのEUのnequeします。  interdumでLoremイプサムかなしみamet、consecteturのadipiscing elit座っている。 ユタviverra duoの当社笑い。"/ SPANは""/"Loremイプサムかなしみamet、consecteturのadipiscing elit座っている。  Suspendisse potenti.Loremイプサムかなしみ、"/ p""/部"amet座る