Question

我有这个html的结构：

<h2 title="{{children.name}}">{{children.name | slice:0:45 }}{{ children.name.length > 45 ? '...':'' }} 
    <div class="tooltip"><i class="fa fa-info-circle"></i>
         <span class="tooltiptext">Tooltip texdasjkdshjk dhasjkd haskd haskd haskjdh askdh ashkdjah jkds t</span>
    </div>
</h2>

在h2我有overflow:hidden。但问题是我没有看到完整的tooltip消息。任何建议我该怎么办？

这是我的css：

h2{
  position:relative;
  overflow:hidden;
}
.tooltip {
    position: absolute;
    display: inline-block;
    right: 5px;
    bottom: 2px;
    pointer-events: all;
    z-index: 999999999;
    i{
        font-size: 25px;
        color: lightblue;
    }
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Answer 1

只需将CSS中相对于static的属性更改为h2元素

如何添加溢出：如果父溢出则显示工具提示：隐藏？

1 个答案: