ツールチップは、具體的に選択された要素に関する追加情報(bào)を表示するために HTML で使用される概念です。これは、ユーザーがツールチップを使用している要素の上にマウスを移動(dòng)すると、その要素に関する指定された情報(bào)が表示されるたびに、マウス ホバー効果で実行できます。
これは、span のようなインライン要素として使用され、場合によってはクラスのツールチップ テキストとともに使用されます。 CSS を使用してツールチップ付きテキストの位置を設(shè)定できます。これは、ツールチップのスタイルと位置を定義するのに役立ちます。 Web ページにツールチップを使用すると、含まれている要素の短い情報(bào)が得られるため、ユーザーとのやり取りを増やすのに役立ちます。
構(gòu)文
HTMLでは、title屬性付きのリンクを利用してツールチップを定義する方式を採用しています。次のように定義できます:
<a href="" title="tooltip_text"> Content </a>
上記の構(gòu)文に示されているように、title 屬性に表示されるテキストはツールヒント テキストとみなされます。したがって、ユーザーはこのリンクをクリックして詳細(xì)を確認(rèn)できます。
タイトルはグローバル屬性とみなされ、ユーザーはそれを要素に簡単に追加できます。これは、要素にクラスまたは ID を追加するのと同じくらい簡単です。これを利用すると、段落や列全體を含む div ブロックなど、あらゆるものを簡単に追加できます。基本的に、ツールチップは要素の上部に表示されます。ツールチップを上下左右の位置に配置できます。この位置は、CSS で定義された値を使用してツールチップに配置されます。
HTML にツールチップを追加するには?
HTML の要素にツールチップを追加できます。 div、paragraph、その他多くの要素も使用します。マウスがその特定の屬性の上に移動(dòng)すると、ツールチップと呼ばれるテキストまたはその他の情報(bào)が表示されます。テキストの右、左、上、下の任意の位置に表示できます。これは次のとおりです。
1.トップの位置
この位置では、要素の上部にツールチップが表示されます。
コード:
.tooltip.tooltiptext{
width: 160px;
bottom:80%;
left:40%;
margin-left: 80px;
}
2.正しい位置
このツールチップ コードは、要素の右側(cè)にツールチップが表示されます。
コード:
.tooltip.tooltiptext{
top:4px;
left:100%;
}
3.左の位置
このツールチップ コードは、要素の左側(cè)にツールチップが表示されます。
コード:
.tooltip.tooltiptext{
top:4px;
right:100%;
}
4.最下位
この位置では、ツールチップは要素の下部に表示されます。
コード:
.tooltip.tooltiptext{
width: 160px;
top:100%;
left:40%;
margin-left: 80px;
}
要素內(nèi)で定義されているこのツールチップ機(jī)能を使用して、要素に矢印付きのツールチップを表示することもできます。 HTML ツールチップは、リンクされた Web ページ、関連ドキュメント、または畫像を開くのにも役立ちます。ツールチップを使用すると、アニメーション効果のようにフェードインでツールチップを表示することができます。これは、次のようなコードを使用して行うことができます:
コード:
.tooltip.tooltiptext{
opacity:0;
transition: opacity 5s;
}
.tooltip:hover.tooltiptext{
opacity:0;
ツールチップを使用して、単一のツールチップをクリックしてモーダル ボックスを開くことで、最も重要なことを行うことができます。このタイプのコードは、単純なリンクを使用して何らかのフォームやその他の詳細(xì)を開く必要がある場合に主に使用されます。これは、最小限のコードでモーダルを開く最も簡単な方法として扱われます。
HTML ツールチップの例
以下は HTML ツールチップの例です:
例 #1
これは、右と左の値を使用してツールチップの位置を表示する一例です。
HTML コード:
<!DOCTYPE html>
<html>
<style>
/*right position*/
.tooltipright{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipright .toolttext {
visibility: hidden;
width: 200px;
height:100px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 8px ;
/* Position the tooltip */
position: absolute;
z-index: 0;
left: 110%;
}
.tooltipright .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 200px;
height:50px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 5px ;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 130%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Tooltip with different Position</h2>
<p style="color :crimson;">Tooltip with Right position</p>
<div class="tooltipright">What is Web Development?
<span class="toolttext">Web Development is a technology used for developing websites, Designing Single page application's webpage etc.</span>
</div>
<br>
<p style="color :crimson;">Tooltip with Left position</p>
<div class="tooltipleft">What is HTML?
<span class="toolttextleft">HTML is markup language for designing web pages for browser. </span>
</div>
</body>
</html>
出力:
例 #2
この例は、畫像だけでなく一部のリンクでもツールチップを使用できることを示しています。したがって、ユーザーがマウスを置くたびに、別の Web ページまたはドキュメントを開くための情報(bào)またはクリック可能なリンクが表示されます。
HTML コード:
<html> <head> <title>HTML tooltip</title> </head> <body> <h4>HTMl Tooptip working on Image and Link</h4> <img src="../Desktop/EDUCBA.png" title="EDUCBA"/ style="height:100px; ????width:300px;"> <br/> <a href="https://www.educba.com/" title="All About EDUCBA."> Online Training and Video Courses</a> </body> </html>
出力:
ユーザーが特定のリンクをクリックすると、次のようにリンクされた Web ページが表示されます。
例 #3
ホバー時(shí)にポップアップを表示したり、特定の要素をクリックしたりする場合、これを簡単に処理するにはツールチップが最適なオプションです。
HTML コード:
<html>
<head>
<title>HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:100px;">
<div class="arrowpopup" onclick="myFunction()">Tooltip Demo Click here!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip helps you to display extra information of element.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>
出力:
結(jié)論
上記のすべての情報(bào)から、ツールヒントは、選択した要素の関連情報(bào)や短い説明を表示するために使用される HTML の機(jī)能であることがわかりました。ユーザーの選択に従って、要素に応じてこのツールチップをどこに表示するかを決定できます。位置の値は右、左、上、または下になります。
以上がHTML ツールチップの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8639
17
1784
16
1729
56
1581
28
1445
31
Webページを構(gòu)築するための重要なHTML要素は何ですか？
Jul 03, 2025 am 02:34 AM
Webページ構(gòu)造は、Core HTML要素でサポートする必要があります。 1.ページの全體的な構(gòu)造は、メタ情報(bào)を保存してコンテンツを表示するルート要素であるルート要素で構(gòu)成されています。 2。コンテンツ組織は、組織構(gòu)造とSEOを改善するために、タイトル（ - ）、パラグラフ（）、およびブロックタグ（など）に依存しています。 3.ナビゲーションは実裝され、実裝され、一般的に使用される組織にはリンクされ、ARIA-CURRENT屬性が補(bǔ)完され、アクセシビリティが強(qiáng)化されます。 4。フォームインタラクションは、、、完全なユーザー入力と提出機(jī)能を確保するための、、および、、、、および、これらの要素を適切に使用すると、ページの明確さ、メンテナンス、検索エンジンの最適化が向上する可能性があります。
HTML5サーバーセントイベントでの再接続とエラーの処理。
Jul 03, 2025 am 02:28 AM
HTML5SSEを使用する場合、再接続とエラーに対処する方法には次のものが含まれます。1。デフォルトの再接続メカニズムを理解します。 EventSourceは、デフォルトで接続が中斷されてから3秒後に再試行します。再試行フィールドを介して間隔をカスタマイズできます。 2.接続障害または解析エラーに対処するためにエラーイベントを聞いて、自動(dòng)再接続に依存しているネットワークの問題、サーバーエラーが手動(dòng)で再接続を遅らせる、認(rèn)証障害の更新トークンなど、対応するロジックを?qū)g行し、実行するロジックを?qū)g行します。 3.接続の手動(dòng)での閉鎖と再構(gòu)築、再試行時(shí)間の最大數(shù)を設(shè)定するなど、再接続ロジックを積極的に制御し、ナビゲーターを組み合わせてネットワークステータスを判斷して再試行戦略を最適化します。これらのメジャーは、アプリケーションの安定性とユーザーエクスペリエンスを改善できます。
最新のページの正しいHTML5 Doctypeを宣言します。
Jul 03, 2025 am 02:35 AM
Doctypeは、ページを解析するために使用するHTML標(biāo)準(zhǔn)をブラウザに伝えるステートメントです。最新のWebページは、HTMLファイルの先頭に記述するだけです。その機(jī)能は、ブラウザが奇妙なモードではなく標(biāo)準(zhǔn)モードでページをレンダリングし、その前にスペースやコメントがない最初の行に配置する必要があることを確認(rèn)することです。それを書く正しい方法は1つだけであり、古いバージョンやその他のバリアントを使用することはお?jiǎng)幛幛筏蓼护蟆?charset、viewportなどのその他は、部分的に配置する必要があります。
HTML屬性を使用したクライアント側(cè)フォーム検証の実裝。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1）userequedtoeenforcemandatoryfields.2）validateemailsandurlswitttributeslikemailorurl、orusepatternwithregexforcustomformats.3）
HTMLを使用して選択したドロップダウン內(nèi)でオプションをグループ化する方法は？
Jul 04, 2025 am 03:16 AM
HTMLのタグを使用して、ドロップダウンメニューにオプションをグループ化します。特定の方法は、次のような要素のグループを包み、ラベル屬性を介してグループ名を定義することです。1。リンゴ、バナナ、オレンジなどのオプションが含まれます。 2。ニンジン、ブロッコリーなどのオプションが含まれています。 3。それぞれが獨(dú)立したグループであり、グループ內(nèi)のオプションは自動(dòng)的にインデントされます。メモには以下が含まれます。 firsedグループ全體を無効にする屬性を介して無効にすることができます。 styleスタイルは制限されており、CSSまたはサードパーティライブラリと組み合わせて美化する必要があります。 select2などのプラグインを使用して機(jī)能を強(qiáng)化できます。
CSSとJavaScriptをHTML5構(gòu)造と効果的に統(tǒng)合します。
Jul 12, 2025 am 03:01 AM
HTML5、CSS、およびJavaScriptは、セマンティックタグ、妥當(dāng)な読み込み順序、デカップリング設(shè)計(jì)と効率的に組み合わせる必要があります。 1. SEOやバリアのないアクセスを助長する構(gòu)造の明確性と保守性の向上など、HTML5セマンティックタグを使用します。 2。CSSを配置し、外部ファイルを使用し、モジュールごとに分割して、インラインスタイルと遅延荷重問題を回避する必要があります。 3. JavaScriptは、前に導(dǎo)入され、Deferまたは非同期を使用して非同期にロードすることをお?jiǎng)幛幛筏蓼埂?4. 3つの間の強(qiáng)い依存性を減らし、データ - *屬性とクラス名制御ステータスを介して動(dòng)作を促進(jìn)し、統(tǒng)一された命名仕様を介してコラボレーション効率を改善します。これらの方法は、ページのパフォーマンスを効果的に最適化し、チームと協(xié)力することができます。
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動(dòng)作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問題に注意してください：無効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
新しいHTML5メソッド（FormData）を使用してフォームデータを送信する
Jul 08, 2025 am 02:28 AM
HTML5のFormData APIを使用してフォームデータを送信する方が便利です。 1.名前屬性を持つフォームフィールドを自動(dòng)的に収集したり、データを手動(dòng)で追加したりできます。 2.ファイルのアップロードに適したMultiPart/Form-Data形式での送信をFetchまたはXmlhttpRequestを介してサポートします。 3.ファイルを処理する場合、FormDataにファイルを追加してリクエストを送信する必要があります。 4.同じ名前のフィールドが上書きされ、JSON変換とネスト構(gòu)造を処理する必要はないことに注意してください。
