html - 将工具提示用于 div 上动态数据的文本溢出

Question

我在一个 div 中有一个绑定(bind)类，它的数据动态变化(每天)。一些超过 div 长度的数据溢出。我想通过实现工具提示来纠正这些溢出错误。我已经使用 css 实现了省略号。我现在想实现一个工具提示，这样当我移动鼠标并将鼠标悬停在使用省略号包裹的文本上时，工具提示应该显示完整的文本。我已经对此进行了大量研究，但由于我还没有找到任何可以解释如何让工具提示处理长度可以动态变化的数据并在其中显示整个文本的信息，所以我陷入了死胡同。这就是我现在的代码中的内容:

    <div class="BoundClass">
                      <div class="EllipsisOverflow">                          
                           <%#Container.DataItem("cClassName")%>
                       </div>
                      </div> 

   .BoundClass 
 {
     font-size: 14px;
     color: #fff;
     margin-left: -10px;
     position: relative;
     height: 20px;
     margin-bottom: 6px;
}

 .EllipsisOverflow
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
 .EllipsisOverflow:hover:after
{
    content: attr(title);
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    overflow:visible;
    text-overflow:clip;
}           

这是绑定(bind)类的 CSS，我还对其应用了省略号

我正在寻找一个简单的答案，所以任何可以提供帮助的人都可以

Answer 1

可以像这样创建一个基本的工具提示

HTML:

<div class='parent'>
    Content
    <span class="tooltip">More Content</span>
</div>

CSS:

.parent {
    position: relative;
}
.tooltip {
    display: none;
    position: absolute;
}
.parent:hover .tooltip {
    display: block;
}

基本上，制作工具提示然后将其隐藏，直到您将鼠标悬停在父项上。

您可以看到一个使用您的 CSS 和代码的工作示例 here