Stack Exchange
z-index not working - element restricted by its container
I am creating a simple Tool Tip using CSS. This is my code contained within a function:
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>';
}   

and this is my 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;}

The tip works fine... when i.tipster is hovered span.tip appears as expected. However, the problem is when when the content of span.tip is extensive span.tip is cut off by the height of the container p.tipster-wrap as shown in this image:

Adding a lower z-index to p.tipster-wrap does not solve the problem and creates an additional issue of i.tip appearing below the next form input as show in this image:

If I add line brakes to p.tipster-wrap the entire i.tip renders properly but adds unnecessary and unwanted space as shown in this image:

Is it possible to resolve this issue with pure css or is jquery required and if so how would I go about it. Thanks in advance for your help.
Fiddle Here
 The issue however is not occuring in the fiddle.

could you create a fiddle (jsfiddle.net) with a [mcve] for us to troubleshoot faster?

@ochi I added a link to the fiddle but the issue is not occurring in the fiddle. really not sure what is happening for sure now...

I whipped up a quickie fiddle: https://jsfiddle.net/0rcbu36n/  I'm not seeing the problem, which means either the code you provided is not sufficient to reproduce the problem, or something is different between what was provided and the actual problem code.

The fiddles are not complete enough based on the screenshots posted, as it appears the "Site Directory" content area has a fixed height and maybe overflow set to hidden or something else that could be changed to fix it. Could you post more of the CSS?

@Surreal Dreams ... I also did a fiddle which worked as well... this lead me to remove the code from the function and test but the issue is still there... not sure where to go from here... I know without all of my code it is virtually impossible to assist but could you suggest anything?

Perhaps some other CSS in action (affecting the fields involved)?

Probably the div in which p.tipster-wrap resides has overflow differen that visible.. can you create a fiddle with that containing block also?

@KrisD @ochi ... The issue was the container which the container which contained p.tipster had overflow:hidden... thanks all for your help

add it as an answer :)

@ochi ... I added the answer... thanks again

Please don't add RESOLVED or SOLVED to your question or title. If you found the answer accept it -- whether you write it or someone else did.

In furtherance of the comment by @j08691, please see http://stackoverflow.com/help/someone-answers

This is caused by a container in which the above code in the question was contained in having a visibility:hidden setting. Below is the entire code concerning this issue:
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>

The culprit was .row having overflow:hidden.
While I am not sure what I am going to do to resolve my problem as .row needs to have visibility:hidden, this was what confused me... at least a solid trouble-shooting lesson was learned.
Thanks again for all the help guys... 
