CSS Tooltips

2025年3月26日 | 阅读 3 分钟

CSS 工具提示是当用户将鼠标光标悬停在元素上时显示额外信息的绝佳方式。

基本工具提示示例

让我们创建一个基本的工具提示，当鼠标光标悬停在元素上时会显示它。

请看这个例子

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">This is tooltip text</span>
</div>
</body>
</html>

使用工具提示，您可以显示四种方式的工具提示信息位置

元素顶部
元素左侧
元素右侧
元素底部

顶部工具提示

顶部工具提示指定，如果您将鼠标光标悬停在元素上，工具提示信息将显示在元素的顶部。

请看这个例子

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
  <span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

底部工具提示

底部工具提示指定，如果您将鼠标光标悬停在元素上，工具提示信息将显示在元素的底部。

请看这个例子

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

左侧工具提示

左侧工具提示指定，如果您将鼠标光标悬停在元素上，工具提示信息将显示在元素的左侧。

请看这个例子

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

右侧工具提示

右侧工具提示指定，如果您将鼠标光标悬停在元素上，工具提示信息将显示在元素的右侧。

请看这个例子

 <!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

下一主题CSS 工具提示动画

CSS Tooltips

基本工具提示示例

顶部工具提示

底部工具提示

左侧工具提示

右侧工具提示

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Tooltips

基本工具提示示例

顶部工具提示

底部工具提示

左侧工具提示

右侧工具提示

相关帖子

CSS flex property

CSS 2D Transforms

flex-flow property

CSS Aural Media

CSS User Interface

CSS Combinators

flex-grow property

CSS @Media Query

flex-basis property

CSS radial-gradient

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器