CSS 工具提示
-
CSS工具提示
当用户将鼠标指针移动到元素上时,工具提示通常用于指定有关某些内容的额外信息:
-
基本工具提示
创建用户将鼠标移到元素上时显示的工具提示:
示例说明
HTML:使用容器元素(如<div>)并将"tooltip"类添加 到其中。当用户将鼠标悬停在此<div>上时,它将显示工具提示文本。工具提示文本放在内联元素(如<span>)中class="tooltiptext"。
CSS:用于定位工具提示文本所需的tooltip类使用。
注意:请参阅下面有关如何定位工具提示的示例。position:relative position:absolute
tooltiptext类保存实际提示文本。它默认是隐藏的,并且在悬停时可见(见下文)。我们还添加了一些基本样式:120px宽度,黑色背景颜色,白色文本颜色,居中文本和5px顶部和底部填充。CSS border-radius属性用于向工具提示文本添加圆角。:hover选择器被用来显示工具提示文本当用户移动鼠标经过<div>使用class="tooltip"。
-
定位工具提示
在本例中,工具提示位于“可悬浮”文本的右边(left:105%)。还要注意top:-5px用于将其放置在容器元素的中间。我们使用数字5是因为工具提示文本的上下填充为5px。如果您增加了它的填充,也要增加top属性的值,以确保它保持在中间(如果这是您想要的)。如果您想将工具提示放在左边,也可以使用相同的方法。
左侧工具提示
如果您希望工具提示显示在顶部或底部,请参阅下面的示例。请注意,我们使用margin-left值为-60像素的属性。这是将工具提示居中于可暂停文本的上方/下方。它设置为工具提示宽度的一半(120/2 = 60)。
顶部工具提示
底部工具提示
-
工具提示箭头
要创建应从工具提示的特定一侧显示的箭头,请在工具提示后添加“空”内容,并将伪元素类::after与content属性一起添加。箭头本身是使用边框创建的。这将使工具提示看起来像一个讲话泡泡。此示例演示如何将箭头添加到工具提示的底部:
将箭头放在工具提示内:top: 100%将箭头放在工具提示的底部。left: 50%将箭头居中。
注意:border-width属性指定箭头的大小。如果更改margin-left值,也请将值更改为相同值。这将使箭头保持居中。border-color用于将内容转换成一个箭头。我们将顶部边框设置为黑色,其余部分设置为透明。如果所有的边都是黑色的,你最终会得到一个黑色方框。此示例演示如何将箭头添加到工具提示的顶部。请注意,我们这次设置了底部边框颜色:此示例演示如何在工具提示的左侧添加箭头:
此示例演示如何在工具提示的右侧添加箭头:
-
淡入工具提示(动画)
如果要在工具提示文本即将可见时淡入其中,可以将CSS transition属性与属性一起使用opacity ,并在指定的秒数(1秒内)从完全不可见变为100%可见例):
-
相关页面
HTML教程:HTML样式