Question

我正在使用CSS创建一个简单的工具提示。这是我在函数中包含的代码：

function textInput($name,$label,$info,$place,$val){
    echo '<p class="tipster-wrap">';
    echo '<i class="fa fa-info-circle tipster"></i> ';
    echo '<span class="tip">'.$info.'</span>';
    echo '<label for="'.$name.'">'.$label.'</label>';
    echo '<input type="text" id="'.$name.'" name="'.$name.'" value="'.$val.'" placeholder="'.$place.'">';
    echo '</p>';
}

这是我的css：

.tipster-wrap{
        position: relative; 
        overflow:visible;
    }

    .tip {';
    width:600px;
    padding:4px 10px;
    border:1px solid #999;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    border-radius:3px;
    -webkit-border-radius:3px;
    position:absolute;
    top:0;
    left:17px;
    display:none;
    z-index:10002;
    background-color: whitesmoke;
    font-size: 12px;
    }';


    .tipster {
        display:inline-block; 
        width: 17px; 
        cursor:pointer;
    }

    .tipster:hover + .tip {display:block;}
    .tip:hover {display:block;}

提示正常工作......当i.tipster悬停时span.tip按预期显示。但是，问题是当span.tip的内容span.tip的内容被容器p.tipster-wrap的高度切断时，如下图所示：

将较低的z-index添加到p.tipster-wrap并不能解决问题，并且会在下一个表单输入下方出现另一个i.tip问题，如下图所示：

如果我在p.tipster-wrap添加线制动器，则整个i.tip渲染正确，但会添加不必要的空间，如图所示：

是否可以使用纯css解决此问题或者是否需要jquery，如果是这样，我将如何解决它。在此先感谢您的帮助。

小提琴Here 然而，这个问题并没有出现在小提琴中。

Answer 1

这是由一个容器引起的，其中问题中的上述代码包含在visibility:hidden设置中。以下是有关此问题的完整代码：

CSS

.row{
    display:block;';
    overflow:hidden;';
    clear:both;';
    }


    *[class*="col_"].alpha{
    margin-left:0;';
    }


    *[class*="col_"].omega{
    margin-right:0;';
    }


    .col_1{width:6.6666666666667%;}
    .col_2{width:15%;}
    .col_3{width:23.333333333333%;}
    .col_4{width:31.666666666667%;}
    .col_5{width:40%;}
    .col_6{width:48.333333333333%;}
    .col_7{width:56.666666666667%;}
    .col_8{width:65%;}
    .col_9{width:73.333333333333%;}
    .col_10{width:81.666666666667%;}
    .col_11{width:90%;}
    .col_12{width:98.333333333333%;}

    .accordion-item-wrap{
    background-color: whitesmoke;';
    }

    .accordion-title{
    border-bottom: 1px #999 solid;';
    padding: '.remCalc(8).';';
    }

    .active-title{color: blue; font-weight: normal;}


    .first-title{
    -webkit-border-radius: 6px 6px 0px 0px;';
    -moz-border-radius: 6px 6px 0px 0px;';
    border-radius: 6px 6px 0px 0px;';
    cursor:pointer;';
    }

    .last-title{
    -webkit-border-radius: 0px 0px 6px 6px;';
    -moz-border-radius: 0px 0px 6px 6px;';
    border-radius: 0px 0px 6px 6px;';
    }


    .accordion-content{
    background-color: white;';
    border-bottom: 1px solid #999;';
    padding: '.remCalc(15).';';
    }   

    .tipster-wrap{
        position: relative; 
        overflow:visible;
    }

    .tip {';
    width:600px;
    padding:4px 10px;
    border:1px solid #999;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    border-radius:3px;
    -webkit-border-radius:3px;
    position:absolute;
    top:0;
    left:17px;
    display:none;
    z-index:10002;
    background-color: whitesmoke;
    font-size: 12px;
    }';


    .tipster {
        display:inline-block; 
        width: 17px; 
        cursor:pointer;
    }

    .tipster:hover + .tip {display:block;}
    .tip:hover {display:block;}

HTML

<div class="button-wrap"><button class="update-button">Update Settings</button></div>

    <ul class="accordion">


        <li class="accordion-item first-title">
            <div class="accordion-item-wrap first-title">
                <div class="accordion-title first-title">
                <i class="fa fa-arrow-circle-right"></i> Site Directory</div>
                <div class="accordion-content hide">


            <div class="row">
                <div class="col_4 alpha">

                    <p class="tipster-wrap">
                        <i class="fa fa-info-circle tipster">X</i>
                        <span class="tip"><b>Directory Type</b><br>Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory.</span>
                        <label for="test">test label</label><br>
                        <input type="text" id="test" name="test" value="" placeholder=" place">
                    </p>

                </div>

                <div class="col_4 alpha">               
                    <p class="tipster-wrap">
                        <i class="fa fa-info-circle tipster">X</i>
                        <span class="tip"><b>Directory Type</b><br>Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory. Select what type of site this is... a Top Level Domain, a Sub Domain, or a Sub Directory.</span>
                        <label for="test">test label</label><br>
                        <input type="text" id="test" name="test" value="" placeholder=" place">
                    </p>                                                            
                </div>
                <div class="col_4 omega">

                </div>
            </div> 

                </div>
            </div>
        </li>

        <li class="accordion-item">
            <div class="accordion-item-wrap">
                <div class="accordion-title"><i class="fa fa-arrow-circle-right"></i> Middle</div>
                <div class="accordion-content hide">x';

                </div>
            </div>
        </li>

        <li class="accordion-item last-title">
            <div class="accordion-item-wrap last-title">
                <div class="accordion-title is-last last-title"><i class="fa fa-arrow-circle-right"></i> Bottom</div>
                <div class="accordion-content last-title hide">x';

                </div>
            </div>
        </li>

    </ul>

罪魁祸首是.row overflow:hidden。

虽然我不确定我要做什么来解决我的问题，因为.row需要visibility:hidden，这让我很困惑...至少一个可靠的解决问题的教训是得知。

再次感谢所有帮助人员......

z-index无法正常工作 - 受其容器

1 个答案: