この記事では、プレーンな JavaScript を使用してツールチップを示します。
プレーンな JavaScript ツールチップを作成するには?
JavaScript を使用してツールチップを作成するには、「 マウスオーバー ' と ' マウスアウト 」イベント。理解を深めるために、以下の例に従ってください。
例 1: JavaScript を使用したツールチップ
この例では、純粋な JavaScript でツールチップを作成し、「 スタイル ' 属性。
まず、mouseover イベントでツールチップを表示するテキストを作成します。
< h5 ID = '文章' > Linux h5 >
「」を使用して、ツールチップが表示されるテキストを取得します getElementById() ' 方法：
どこで = 書類。 getElementById ( '文章' ) ;
今、「 addEventListener() ” を渡すことによるメソッド マウスオーバー 」 event と function() をパラメーターとして使用します。定義された関数では、まず、「 分周 」要素、ホバー上に表示されるテキストを設定し、「 スタイル ' 属性。最後に、「 appendChild() ' 方法：
lh. addEventListener ( 'マウスオーバー' 、 関数 ( ) {ツールチップでした = 書類。 createElement ( 「分割」 ) ;
ツールチップ。 インナーHTML = 「スキルを学ぶのに最適なウェブサイト」 ;
ツールチップ。 スタイル . 視認性 = '見える' ;
ツールチップ。 スタイル . 位置 = '絶対' ;
ツールチップ。 スタイル . 背景色 = 'rgb(107, 101, 101)' ;
ツールチップ。 スタイル . パディング = 「5px」 ;
ツールチップ。 スタイル . ボーダー半径 = 「3px」 ;
ツールチップ。 スタイル . 色 = '白' ;
ツールチップ。 スタイル . 左 = 「50%」 ;
ツールチップ。 スタイル . 幅 = 「200px」 ;
書類。 体 . appendChild ( ツールチップ ) ;
} ) ;
ここでは、「 マウスアウト カーソルがテキストから離れている間にツールチップを削除するイベント:
lh. addEventListener ( 「マウスアウト」 、 関数 ( ) {
書類。 体 . removeChild ( ツールチップ ) ;
} ) ;
出力
例 2: JavaScript と CSS を使用したツールチップ
CSS を使用して JavaScript でツールチップを作成することもできます。
これを行うには、 タグを使用してツールチップのテキストを表示する領域を作成し、id ' #myTooltip 」：
< スパンID = 「マイツールチップ」 > スパン >「を使用して、テキストとツールチップの参照を取得します。 getElementById() ' 方法：
どこで = 書類。 getElementById ( '文章' ) ;ツールチップでした = 書類。 getElementById ( 「マイツールチップ」 ) ;
「 マウスオーバー 」を使用して関数内のテキストを設定することにより、イベント インナーHTML ' 財産：
lh. addEventListener ( 'マウスオーバー' 、 関数 ( ) {ツールチップ。 スタイル . 視認性 = '見える' ;
ツールチップ。 インナーHTML = 「スキルを学ぶのに最適なウェブサイト」 ;
} ) ;
「 マウスアウト 」イベント「 視認性 ”プロパティへ” 隠れた 」：
lh. addEventListener ( 「マウスアウト」 、 関数 ( ) {ツールチップ。 スタイル . 視認性 = '隠れた' ;
} ) ;
IDを作成する」 #myTooltip 」 ツールチップのスタイルを設定するスタイル シートで:
#myTooltip {視認性 : 隠れた ;
幅 : 200px ;
と - 索引 : 1 ;
バックグラウンド - 色 : RGB ( 107 、 101 、 101 ) ;
文章 - 整列する : 中心 ;
色 : 白 ;
パディング : 5px 0 ;
国境 - 半径 : 3px ;
左 : 50 %;
}
ツールチップがテキストに正常に実装されていることがわかります。
HTML と CSS を使用してツールチップを作成する方法
JavaScript を使用せずにツールチップを作成することもできます。 HTML ファイルで、テキスト「 Linux 」にカーソルを合わせるとツールチップが表示されます。 要素を作成して、heading/text タグ内にツールチップのテキストを設定します。
Linux
< スパン クラス = 「ツールチップテキスト」 >
スキルを学ぶプラットフォーム
スパン >
h5 >
スタイル シートで、HTML 要素に割り当てられるクラスまたは ID を作成します。ここでは、クラスを作成します」 ツールチップ 」が見出しに割り当てられます。
. ツールチップ {位置 : 相対的 ;
画面 : 列をなして - ブロック ;
}
クラスを定義する」 ツールチップテキスト ” ツールチップのテキストのスタイルを設定し、それに HTML を割り当てます “ <スパン> ' 鬼ごっこ：
. ツールチップテキスト {視認性 : 隠れた ;
幅 : 150px ;
バックグラウンド - 色 : RGB ( 107 、 101 、 101 ) ;
色 : #fff ;
文章 - 整列する : 中心 ;
パディング : 5px 0 ;
国境 - 半径 : 3px ;
位置 : 絶対 ;
と - 索引 : 1 ;
下 : 125 %;
左 : 50 %;
マージン - 左 : - 60px ;
不透明度 : 0 ;
遷移 : 不透明度 0.3s ;
}
設定 ' ホバー 」の効果 ツールチップ 」 ホバー効果でツールチップを表示するクラス:
. ツールチップ : ホバーします。 ツールチップテキスト {視認性 : 見える ;
不透明度 : 1 ;
}
出力
プレーンな JavaScript ツールチップに関連するすべての必要な手順をまとめました。
結論
JavaScript を使用してツールチップを作成するには、「 マウスオーバー ' と ' マウスアウト 」イベント。要素にカーソルを合わせるとツールチップが表示され、mouseout イベントがトリガーされると非表示になります。ツールチップのスタイルを設定するには、「 スタイル JavaScript の ” 属性。この記事では、プレーンな JavaScript、CSS を使用した JavaScript、および JavaScript を使用しないツールチップを使用してツールチップを作成する最良の例を示しました。