srcmini本文概述
当用户将鼠标光标移到元素上时, 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 srcmini</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 srcmini</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 srcmini</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 srcmini</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>
评论前必须登录！
注册