小码哥的IT人生

CSS 工具提示 详解

css3基础 2022-05-23 12:07:55小码哥的IT人生shichen

CSS 工具提示

通过 CSS 创建工具提示(Tooltip)。

演示:工具提示

示例代码:

当用户将鼠标指针移到元素上时,工具提示通常用于提供关于某内容的额外信息:

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text

 

基础的工具提示

创建一个鼠标移到元素上时显示的工具提示:

示例代码:

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* 定位工具提示文本 - 请看下面的例子 */
  position: absolute;
  z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时,显示工具提示文本 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  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>请把鼠标移到下面的文字上:</p>
<div class="tooltip">移到我上面
  <span class="tooltiptext">工具提示文本</span>
</div>
<p>请注意,工具提示文本的位置不是很好。请返回教程并继续阅读如何以理想的方式放置工具提示。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

例子解释

HTML:

使用容器元素(例如 <div>)并向其添加 "tooltip" 类。当用户将鼠标悬停在此 <div> 上时,会显示工具提示文本。

工具提示文本位于 class="tooltiptext" 的嵌入式元素(如 <span>)中。

CSS:

tooltip 类使用 position:relative,用于放置工具提示文本(position:absolute)。注意:有关如何放置工具提示,请参见下面的例子。

tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的,并会在鼠标悬停时可见(请参阅下文)。我们还为其添加了一些基本样式:120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距(padding)。

CSS border-radius 属性用于向工具提示文本添加圆角。

当用户将鼠标移到 class="tooltip" 的 <div> 上时,:hover 选择器用于显示工具提示文本。

定位工具提示

在本例中,工具提示位于“可悬停”文本(<div>)的右侧(left:105%)。另外请注意,top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距,还请您同时增加 top 属性的值,以确保它停留在中间。如果要将工具提示放在左侧,也同样适用。

右侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  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;">
<h1>Right Tooltip</h1>
<p>请把鼠标移到下方文本上:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

左侧工具提示

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  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;">
<h1>左侧工具提示</h1>
<p>请把鼠标移到下方文本上:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

如果您希望工具提示位于上方或下方,请看下面的例子。请注意,我们使用了负 60 像素的左外边距属性(margin-left)。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半(120/2 = 60)。

顶部工具提示

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  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;">
<h1>Top Tooltip</h1>
<p>请把鼠标移到下方文本上:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

底部工具提示

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  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;">
<h1>下方工具提示</h1>
<p>请把鼠标移到下方文本上:</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

工具提示箭头

如需创建在工具提示的指定侧面显示的箭头,请在工具提示后添加“空的”内容,并使用伪元素类 ::aftercontent 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

本例演示如何在工具提示的底部添加箭头:

底部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

例子解释

将箭头定位在工具提示内:top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。

注意:border-width 属性指定箭头的大小。如果您更改此设置,也请将 margin-left 值更改为相同值。这将使箭头居中。

border-color 用于将内容转换为箭头。我们将上边框设置为黑色,其余设置为透明。如果所有面都是黑色,则最终将得到一个黑色的方形框。

本例演示了如何在工具提示的顶部添加箭头。请注意,这次我们设置了下边框的颜色:

顶部箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>下方工具提示 w/ 上箭头</h1>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示如何在工具提示的左侧添加箭头:

左侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>右侧工具提示 w/ 左箭头</h1>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例演示如何在工具提示的右侧添加箭头:

右侧箭头

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

结果:

请把鼠标指针移动到这段文字上方 Tooltip text

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<h1>左侧工具提示 w/ 右箭头</h1>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

淡入的工具提示(动画)

如果希望在即将显示的工具提示文本中淡入淡出,可以将 CSS transition 属性与 opacity 属性一同使用,并在指定的秒数(例子中是 1 秒)内从完全不可见变为 100% 可见:

示例代码:

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  opacity: 1;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* 淡入工具提示 - 用 1 秒从完全不可见变为可见: */
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">
<h1>悬停时淡入的工具提示</h1>
<p>当您将鼠标移到下方的文本上时,工具提示文本将淡入并花费 1 秒的时间从完全不可见变为可见。</p>
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024