HTML 工具提示-html教學-PHP中文網

如何在 HTML 中新增工具提示？

1.最高位置

2.正確的位置

3.左側位置

4.底部位置

HTML 工具提示範例

範例 #3

結論

首頁

web前端

html教學

HTML 工具提示

王林

Sep 04, 2024 pm 04:41 PM

html html5 HTML Tutorial HTML Properties HTML tags

工具提示是 HTML 中使用的概念，用於顯示有關特定選定元素的一些額外資訊。每當使用者將滑鼠移到使用工具提示顯示有關該元素的指定資訊的元素上時，都可以在滑鼠懸停效果上完成此操作。

它用作像 span 一樣的內聯元素，有時與類別工具提示文字一起使用。我們可以使用 CSS 設定工具來提示文字的位置，這有助於我們為工具提示定義某種樣式和位置。在網頁中使用工具提示可以幫助我們與使用者進行更多交互，因為它提供了所包含元素的簡短資訊。

文法

HTML 使用一種透過使用帶有標題屬性的連結來定義工具提示的方法。它可以定義如下：

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

登入後複製

如上面的語法所示，標題屬性中顯示的文字被視為工具提示文字。因此用戶可以點擊此連結查看更多相關資訊。

標題被認為是全域屬性，因此它允許使用者輕鬆地將其添加到元素中，就像向元素添加類別或id一樣簡單。借助它，人們可以簡單地添加任何內容，即段落、div 區塊，其中包含整個列和更多內容。基本上，工具提示顯示在元素的頂部。人們可以將工具提示放在頂部、底部、左側或右側等位置。透過使用 CSS 中定義的某些值將其定位到工具提示。

如何在 HTML 中新增工具提示？

工具提示可以加入 HTML 中的元素。它也使用 div、段落等元素。每當滑鼠懸停在該特定屬性上時，它將顯示文字或其他資訊（稱為工具提示）。它可以顯示在文字的右、左、上、下任意位置。如下：

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 工具提示也有助於開啟連結的網頁、相關文件或圖片。我們可以看到using tooltip就是以淡入的方式顯示tooltip，就像動畫效果一樣。我們可以使用以下程式碼來做到這一點：

代碼：

.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

這個範例說明我們可以在某些連結以及圖像上使用工具提示。因此，每當使用者將滑鼠懸停在其上時，都會顯示資訊或可點擊的連結以開啟另一個網頁或文件。

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 工具提示

每當使用者點擊給定連結時，都會顯示連結的網頁，如下所示：

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 工具提示