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