HTML ツールチップ-htmlチュートリアル-php.cn

HTML ツールチップ

王林

リリース： 2024-09-04 16:41:45

オリジナル

913 人が閲覧しました

ツールチップは、具体的に選択された要素に関する追加情報を表示するために 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 コード:

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

ログイン後にコピー

出力:

HTML ツールチップ

例 #2

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

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>

ログイン後にコピー

出力:

HTML ツールチップ

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

HTML ツールチップ

例 #3

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

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>

ログイン後にコピー

出力:

HTML ツールチップ