CSS tooltip

HTML

<input type="text" class="tooltip">hover text
  <span>tooltip thisIsALongTextMasssssssdeToBeBreak</span>

CSS

input.tooltip {
    position: relative; 
    top: 50px; 
    left: 50px;
}

input.tooltip:focus {
    opacity: 1; 
    visibility: visible;
}

input.tooltip span {
    padding: 10px;
    top: 20px;     
    min-width: 75px;
    max-width: 150px;
    background-color: #000000; 
    color: #FFFFFF;
    height: auto;
    border-radius: 5px; 
    opacity: 0; 
    position:absolute;
    visibility: hidden;
    word-wrap: break-word;
    -webkit-transition: all 0.5s; 
       -moz-transition: all 0.5s; 
        -ms-transition: all 0.5s; 
         -o-transition: all 0.5s; 
            transition: all 0.5s;    
}