html - 如何添加溢出:visible to tooltip if parent is overflow:hidden?

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元素即可