Html CSS溢出：自动隐藏工具提示

我有一个工具提示，由于父div上的

溢出：auto

而被隐藏

<div id="content">
    <div id="wrapper">
        <div class="item"><span class="tooltip">Tooltip text</span></div>
        <div class="item"><span class="tooltip">Tooltip text</span></div>
        <div class="item"><span class="tooltip">Tooltip text</span></div>
    </div>
</div>

#wrapper {
    width: 400px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: auto;
    padding: 10px;
}
.item {
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-top: 10px;
    position: relative;
}
.item:hover .tooltip {
    visibility: visible;
}
.item .tooltip {
    visibility: hidden;
    background-color: black;
    color: #fff;
    padding: 5px 0;
    border-radius: 6px;
    overflow: auto;
    z-index: 1;
    width: 100px;
    position: absolute;
}

提示文本
提示文本
提示文本
#包装纸{
宽度：400px；
高度：100px；
边框：1px实心#ccc；
边界半径：10px；
溢出：自动；
填充：10px；
}
.项目{
宽度：50px；
高度：50px；
边框：1px实心#ccc；
边界半径：10px；
边缘顶部：10px；
位置：相对位置；
}
.item:悬停。工具提示{
能见度：可见；
}
.项目.工具提示{
可见性：隐藏；
背景色：黑色；
颜色：#fff；
填充：5px0；
边界半径：6px；
溢出：自动；
z指数：1；
宽度：100px；
位置：绝对位置；
}

---

设置

位置：绝对至<代码>位置：固定在
工具提示中