The tooltip in the input works with focus, however, when I enter the data and the input loses focus, the tooltip runs over the entered data. How to solve this problem, tell me or show.

.form-group { margin-bottom: 20px; position: relative; display: block; } .form-control { width: 100%; height: 80px; padding: 0 32px 2px; border: 1px solid #e5e5e5; font-size: 16px; display: block; border-radius: 3px; background-color: #ffffff; color: #505b6a; transition: all .3s ease; box-sizing: border-box; } .ui-input-placeholder { position: absolute; z-index: 5; top: 32px; left: 46px; color: #b0aaaa; font-size: 16px; pointer-events: none; transition: top 0.3s ease; } .ui-input-placeholder::before { content: '*'; position: absolute; top: -6px; left: -15px; color: #df4a4a; line-height: 1; font-size: 23px; z-index: 10; } .form-control { width: 100%; height: 80px; padding: 0 32px 2px; border: 1px solid #e5e5e5; font-size: 16px; display: block; border-radius: 3px; background-color: #ffffff; color: #505b6a; transition: all .3s ease; font-weight: normal; font-family: "Roboto-Light", sans-serif; } .form-control:focus { padding-top: 30px; } .form-control:focus+.ui-input-placeholder { top: 19px; } .required-field .form-control { padding-left: 45px; z-index: 5; position: relative; background-color: transparent; } .required-field .form-control:focus+.ui-input-placeholder::before { top: -5px; } 
 <label class="form-group required-field"> <input type="text" class="form-control"> <span class="ui-input-placeholder">РСгион использования</span> </label>

    2 answers 2

    You can try through the pseudo-class: valid on pure css + html

     .form-group { margin-bottom: 20px; position: relative; display: block; } .form-control { width: 100%; height: 80px; padding: 0 32px 2px; border: 1px solid #e5e5e5; font-size: 16px; display: block; border-radius: 3px; background-color: #ffffff; color: #505b6a; transition: all .3s ease; box-sizing: border-box; } .ui-input-placeholder { position: absolute; z-index: 5; top: 32px; left: 46px; color: #b0aaaa; font-size: 16px; pointer-events: none; transition: top 0.3s ease; } .ui-input-placeholder::before { content: '*'; position: absolute; top: -6px; left: -15px; color: #df4a4a; line-height: 1; font-size: 23px; z-index: 10; } .form-control { width: 100%; height: 80px; padding: 0 32px 2px; border: 1px solid #e5e5e5; font-size: 16px; display: block; border-radius: 3px; background-color: #ffffff; color: #505b6a; transition: all .3s ease; font-weight: normal; font-family: "Roboto-Light", sans-serif; } .form-control:focus, .form-control:valid { padding-top: 30px; } .form-control:focus+.ui-input-placeholder, .form-control:valid+.ui-input-placeholder { top: 19px; } .required-field .form-control { padding-left: 45px; z-index: 5; position: relative; background-color: transparent; } .required-field .form-control:focus+.ui-input-placeholder::before { top: -5px; } 
     <label class="form-group required-field"> <input type="text" class="form-control" required="required"> <span class="ui-input-placeholder">РСгион использования</span> </label>

    Eng version https://stackoverflow.com/a/11209779/5441700

      You can check if there is text in the input, then leave it 'in focus'

       $('.form-control').focusout(function(){ if ($(this).val()) { $(this).trigger('focus'); } }); 
       .form-group { margin-bottom: 20px; position: relative; display: block; } .form-control { width: 100%; height: 80px; padding: 0 32px 2px; border: 1px solid #e5e5e5; font-size: 16px; display: block; border-radius: 3px; background-color: #ffffff; color: #505b6a; transition: all .3s ease; box-sizing: border-box; } .ui-input-placeholder { position: absolute; z-index: 5; top: 32px; left: 46px; color: #b0aaaa; font-size: 16px; pointer-events: none; transition: top 0.3s ease; } .ui-input-placeholder::before { content: '*'; position: absolute; top: -6px; left: -15px; color: #df4a4a; line-height: 1; font-size: 23px; z-index: 10; } .form-control { width: 100%; height: 80px; padding: 0 32px 2px; border: 1px solid #e5e5e5; font-size: 16px; display: block; border-radius: 3px; background-color: #ffffff; color: #505b6a; transition: all .3s ease; font-weight: normal; font-family: "Roboto-Light", sans-serif; } .form-control:focus { padding-top: 30px; } .form-control:focus+.ui-input-placeholder { top: 19px; } .required-field .form-control { padding-left: 45px; z-index: 5; position: relative; background-color: transparent; } .required-field .form-control:focus+.ui-input-placeholder::before { top: -5px; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="form-group required-field"> <input type="text" class="form-control"> <span class="ui-input-placeholder">РСгион использования</span> </label>