Question

我需要一个工具提示才能显示在其父母之上。我尝试设置z-index和溢出值，但无法获得所需的结果。将鼠标悬停在红色框上时会出现工具提示。期望的结果：工具提示字段显示在顶部，因此左侧（和底部）侧不在父级之下且子级不能超出范围（滚动功能需要保持不变。

.parent {
    position: relative;
    float: left;
    margin-left: 30px;
    width: 380px;
    text-align: left;
    height: 380px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 2px solid #f4f4f4;
    border-radius: 2px;
}

.child-container {
    text-align: center;
    border-radius: 2px;
    border-color: transparent;
    font-weight: normal;
    font-size: 12px;
    width: 80%;
/*    width: calc((100% - 83px) / 3);*/
    margin: 20px 10px 10px 15px;
    vertical-align: top;
    display: inline-block;
}

.header {
    padding: 10px;
    background-color: #e6e6e6;
    border: 1pt solid #ccc;
    border-radius: 2px;
}

label {
    color: #757575;
    text-align: left;
    line-height: 1.5;
    margin-bottom: 0;
    display: block;
}

.info {
    border: 0;
    height: 15px;
    text-align: right;
    position: relative;
}

.info:hover .tooltip {
    display: block;
}

.img {
    display: inline-block;
    height: 15px;
    width: 15px;
    background: red;
}

.tooltip {
    width: 300px;
    text-align: center;
    color: white;
    background: #00c853;
    position: absolute;
    left: 50%;
    z-index: 100;
    padding: 5px;
    font-size: 14px;
    border-radius: 2px;
    display: none;
    top: 150%;
    margin-left: -150px;
}

.tooltip.top:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #00c853;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    border-top-color: transparent;
    border-bottom: 10px solid #00c853;
    top: -20px;
    bottom: auto;
}

<div class="parent">
    <div class="child-container" style="display: inline-block;">
        <div class="header">MY HEADER</div>

        <div style="width:100%;margin:10px 10px 10px 0;text-align:left;">
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>

            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 1</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 2</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 3</span>
            </label>
            <label style="font-size: 11px;color:#757575;text-align:left;line-height:1.5;margin-bottom:0;">
                <span style="padding-left:30px;">child 4</span>
                <span class="info">
                    <div class="img"></div>
                    <span class="tooltip top" style="margin-left:-155px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sem varius, consectetur quam in, blandit leo. Integer consectetur congue nulla ac sollicitudin. Sed in erat quam. Suspendisse eget ex lectus. Nunc eleifend elit nisl, quis faucibus nisl scelerisque eu. Vestibulum venenatis lacus magna, ut finibus nunc porttitor quis. Nulla eget tellus placerat, tincidunt massa quis, mattis dolor.</span>
                </span>
            </label>
        </div>
    </div>
</div>

Answer 1

如果我理解你的问题，基本上你想让你的工具提示转移到右侧，这样它就不会隐藏你左边的列表，以及你在那里提供的滚动。以下是您可以实现的一些CSS更改：

.tooltip {
    width: 250px;
    text-align: center;
    color: white;
    background: #00c853;
    position: absolute;
    left: 0;
    z-index: 100;
    padding: 5px;
    font-size: 14px;
    border-radius: 2px;
    display: none;
    top: 150%;
    margin-left: 0;
}
.tooltip.top:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #00c853;
    content: '';
    position: absolute;
    left: 11px;
    bottom: -10px;
    margin-left: -10px;
    border-top-color: transparent;
    border-bottom: 7px solid #00c853;
    top: -14px;
    bottom: auto;
}

另外，请删除HTML中<span class="tooltip top">的内联样式。

您可以在jsfiddle here中查看更新的代码。

CSS显示跨越一切

1 个答案: