HTML ツールチップ

ツールチップは、具体的に選択された要素に関する追加情報を表示するために HTML で使用される概念です。これは、ユーザーがツールチップを使用している要素の上にマウスを移動すると、その要素に関する指定された情報が表示されるたびに、マウス ホバー効果で実行できます。

これは、span のようなインライン要素として使用され、場合によってはクラスのツールチップ テキストとともに使用されます。 CSS を使用してツールチップ付きテキストの位置を設定できます。これは、ツールチップのスタイルと位置を定義するのに役立ちます。 Web ページにツールチップを使用すると、含まれている要素の短い情報が得られるため、ユーザーとのやり取りを増やすのに役立ちます。

構文

HTMLでは、title属性付きのリンクを利用してツールチップを定義する方式を採用しています。次のように定義できます:

<a href="" title="tooltip_text"> Content </a>

上記の構文に示されているように、title 属性に表示されるテキストはツールヒント テキストとみなされます。したがって、ユーザーはこのリンクをクリックして詳細を確認できます。

タイトルはグローバル属性とみなされ、ユーザーはそれを要素に簡単に追加できます。これは、要素にクラスまたは ID を追加するのと同じくらい簡単です。これを利用すると、段落や列全体を含む div ブロックなど、あらゆるものを簡単に追加できます。基本的に、ツールチップは要素の上部に表示されます。ツールチップを上下左右の位置に配置できます。この位置は、CSS で定義された値を使用してツールチップに配置されます。

HTML にツールチップを追加するには?

HTML の要素にツールチップを追加できます。 div、paragraph、その他多くの要素も使用します。マウスがその特定の属性の上に移動すると、ツールチップと呼ばれるテキストまたはその他の情報が表示されます。テキストの右、左、上、下の任意の位置に表示できます。これは次のとおりです。

1.トップの位置

この位置では、要素の上部にツールチップが表示されます。

コード:

.tooltip.tooltiptext{
width: 160px;
bottom:80%;
left:40%;
margin-left: 80px;
}

2.正しい位置

このツールチップ コードは、要素の右側にツールチップが表示されます。

コード:

.tooltip.tooltiptext{
top:4px;
left:100%;
}

3.左の位置

このツールチップ コードは、要素の左側にツールチップが表示されます。

コード:

.tooltip.tooltiptext{
top:4px;
right:100%;
}

4.最下位

この位置では、ツールチップは要素の下部に表示されます。

コード:

.tooltip.tooltiptext{
width: 160px;
top:100%;
left:40%;
margin-left: 80px;
}

要素内で定義されているこのツールチップ機能を使用して、要素に矢印付きのツールチップを表示することもできます。 HTML ツールチップは、リンクされた Web ページ、関連ドキュメント、または画像を開くのにも役立ちます。ツールチップを使用すると、アニメーション効果のようにフェードインでツールチップを表示することができます。これは、次のようなコードを使用して行うことができます:

コード:

.tooltip.tooltiptext{
opacity:0;
transition: opacity 5s;
}
.tooltip:hover.tooltiptext{
opacity:0;

ツールチップを使用して、単一のツールチップをクリックしてモーダル ボックスを開くことで、最も重要なことを行うことができます。このタイプのコードは、単純なリンクを使用して何らかのフォームやその他の詳細を開く必要がある場合に主に使用されます。これは、最小限のコードでモーダルを開く最も簡単な方法として扱われます。

HTML ツールチップの例

以下は HTML ツールチップの例です:

例 #1

これは、右と左の値を使用してツールチップの位置を表示する一例です。

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>

<h2 id="Tooltip-with-different-Position">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>

出力:

例 #2

この例は、画像だけでなく一部のリンクでもツールチップを使用できることを示しています。したがって、ユーザーがマウスを置くたびに、別の Web ページまたはドキュメントを開くための情報またはクリック可能なリンクが表示されます。

HTML コード:

<title>HTML tooltip</title>


<h4 id="HTMl-Tooptip-working-on-Image-and-Link">HTMl Tooptip working on Image and Link</h4>
<img  src="/static/imghwm/default1.png" data-src="../Desktop/EDUCBA.png" class="lazy" title="EDUCBA"   style="max-width:90%" alt="HTML ツールチップ" >
<br>
<a href="https://www.educba.com/" title="All About EDUCBA.">
Online Training and Video Courses</a>

出力:

ユーザーが特定のリンクをクリックすると、次のようにリンクされた Web ページが表示されます。

例 #3

ホバー時にポップアップを表示したり、特定の要素をクリックしたりする場合、これを簡単に処理するにはツールチップが最適なオプションです。

HTML コード:

<title>HTML tooltip</title>

<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>

<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>

出力:

結論

上記のすべての情報から、ツールヒントは、選択した要素の関連情報や短い説明を表示するために使用される HTML の機能であることがわかりました。ユーザーの選択に従って、要素に応じてこのツールチップをどこに表示するかを決定できます。位置の値は右、左、上、または下になります。

以上がHTML ツールチップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。