W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 提示工具(Tooltips)



用CSS可以创建提示工具。


提示工具示例:

当用户将鼠标指针移动到元素时,提示工具经常用来指定一些额外的信息:

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


基本提示工具

用户移动鼠标指针到一个元素创建一个提示工具:

Example

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
尝试一下 »

提示工具定位

Right Tooltip

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

Result:

Hover over me Tooltip text
尝试一下 »

Left Tooltip

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

Result:

Hover over me Tooltip text
尝试一下 »

如果你想提示出现在顶部或底部,看下面的例子。请注意,我们使用的 margin-left 属性的值减去60像素。这是中心提示高于/低于hoverable文本。它设置为提示的宽度的一半(120 / 2 = 60)。

Top Tooltip

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

Result:

Hover over me Tooltip text
尝试一下 »

Bottom Tooltip

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

Result:

Hover over me Tooltip text
尝试一下 »

提示箭头

创建一个箭头,应该在提示特定一方的出现,加上“空”的内容后,工具提示,与伪元素类 ::after 在一起的内容属性。箭头本身是使用边框创建的。这会看起来像一个气泡提示。

这个例子演示了如何添加一个箭头的提示下:

Bottom Arrow

.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;
}

Result:

Hover over me Tooltip text
尝试一下 »

Top Arrow

.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;
}

Result:

Hover over me Tooltip text
尝试一下 »

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

Left Arrow

.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;
}

Result:

Hover over me Tooltip text
尝试一下 »

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

Right Arrow

.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;
}

Result:

Hover over me Tooltip text
尝试一下 »

淡入提示工具(动画)

Example

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

.tooltip:hover .tooltiptext {
    opacity: 1;
}
尝试一下 »