JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">
    <a class="tooltip" href="#">
        Some content
        <span>tooltip</span>
      
    </a>
</div>

Why does this tooltip hover itself if it is initially positioned left -999px? Something to do with parent elements..

CSS

#one {
    width:100px;
    height:50px;
    background-color:#dddddd;
    border: 1px solid #000000;
    line-height: 2em;
      border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    /*has to be here for span transition to work, linked to non existent attr*/
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
}

#one:hover {
    width:100px;
    height:50px;
    background-color:#dddddd;
    border: 1px solid #000000;
    line-height: 2em;
      border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
   

    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
}

#one a:hover {
    
    background:#ffffff; 
    text-decoration:none;
    z-index: 10;

    }  
    
    
#one a.tooltip span {
    
    display:block; 
    position:relative; 
    
    left:-999px;
    
    background:#ffffff; 
    border:1px solid #cccccc; 
    color:#6c6c6c;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    vertical-align:middle;
    padding:1px;
    opacity:.5;   
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;

    }
    
#one a.tooltip:hover span{
    
    display:block; 
    position:relative; 
    
    left:0px;
    
    background:#ffffff; 
    border:1px solid #cccccc; 
    color:#6c6c6c;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:center;
    vertical-align:middle;
    padding:1px;
     opacity:1;   
    -webkit-transition: opacity;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 500ms;
 
    }