HTML+CSS 小功能（CSS实现Tooltip）_html tooltip特效-优快云博客

本文链接：https://blog.youkuaiyun.com/MDS_jiuyue/article/details/140274431

一、思路

首先当内容长度超出 div 容器宽度时显示省略号，然后在鼠标悬停时显示完整内容的内容提示，可以使用 CSS 来设置文本的省略显示，并使用 title 属性或自定义的 div 作为工具提示。

二、实现

1. CSS 设置省略号显示：

.tooltip-cell {
    white-space: nowrap; // 这个属性设置文本在一个元素内不换行
    overflow: hidden;
    text-overflow: ellipsis; //使元素以内联块的形式显示，即元素在行内显示，但具有块级特性，比如可以设置宽度和高度。
}

2. HTML 结构：

<div class="tooltip">
    <div class="tooltip-cell">这里是单元格内容</div>
    <span class="tooltiptext">这里是完整的内容</span>
</div>

3. CSS设置提示

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0; //设置元素的透明度为 0，即完全透明。
    transition: opacity 0.3s; //设置元素的透明度变化有一个 0.3 秒的过渡效果，使得显示和隐藏效果更平滑。

}

.tooltip:hover .tooltiptext {
    visibility: visible; //将 visibility 属性设置为 visible，使元素可见。
    opacity: 1; //设置为 1，使元素完全不透明。
}