0

Estoy queriendo mostrar información adicional, al hacer click en los campos input las acciones funcionan correctamente, el único problema es que no puedo mostrar la información en un mismo lugar determinado pero en la misma dirección del campo input.

En el primer campo la información se muestra en lugar ideal, ya en el segundo se sale de su entorno.

$(function () {
$('.note').hide();

$('input').click(function() {
   $('.note').hide();
   $("."+$(this).attr('class')).show();
});

$('input').blur(function() {
   $('.note').hide();
});
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, ::after, ::before {
    box-sizing: border-box;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.container:before,
.container:after,
.row:before,
.row:after {
  display: table;
  content: " ";
}

.container:after,
.row:after{
  clear:both
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.note {
    display: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    top: -5px;
    background: #ecf3f7;
    margin-left: 20px;
    color: #555;
    padding: 1.2em;
    min-width: 260px;
    z-index: 1;
    font-size: .86em;
    line-height: 1.4;
    float: left;
    position: absolute;
    left: 200%;
}

.note::before {
    content: '';
    display: block;
    position: absolute;
    right: 100%;
    top: 16px;
    border: 8px solid transparent;
    border-left-width: 0;
    border-right-color: #ecf3f7;
}


/* Desing form*/
.maximum, .middle {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

#login,#register {
    height: 100% !important;
    min-height: 800px;
    padding-bottom: 20%;
    padding-top: 20%;
  background: url(../img/system/bg-four.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
}
.content-form {
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 30px;
    width: 50%;
    height: 100%;
    min-height: auto;
    max-height: auto;
}

.content-form .field {
    position: relative;
    display: inline-block;
    float: left;
    min-height: 75px;
}

.content-form .field-block {
  width: 100% !important;
  padding-right: 15px;
}

.content-form .field-half {
  width: 50% !important;
  padding-right: 15px;
}

.content-form .field input[type="email"], .content-form .field input[type="password"], .content-form .field input[type="text"], .content-form .field select {
    padding: 25px 10px 10px;
    width: 100%;
    background-color: #f2f2f2;
    outline: 0;
    border: 1px solid #5ea4b7;
    color: #000;
    height: 50px;
}

@media (min-width: 768px) {
  .middle {
    float: left;
  }
  .container {
    width: 750px;
  }
  .middle {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .maximum, .middle {
    float: left;
  }
  .container {
    width: 1170px;
  }
  .maximum {
    width: 100%;
  }
  .middle {
    width: 50%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


	<div id="register">
		<div class="container">
			<div class="row">
				<div class="maximum">
					<div class="content-form">
						<h1>Regístrese</h1>
						<form autocomplete="off">
							<div class="form-group">
								<div class="field field-half">
									<input type="text" class="note-1" name="first_name">
									<label class="required">Nombres</label>
									<div class="note note-1">Example 1</div>
								</div>
								<div class="field field-half">
									<input type="text" class="note-2" name="last_name">
									<label class="required">Apellidos</label>
									<div class="note note-2">Example 2</div>
								</div>
								<div class="clearfix"> </div>
							</div>
							<div class="form-group">
								<div class="field field-half">
									<input type="text" class="note-3" name="email">
									<label class="required">Nombres</label>
									<div class="note note-3">Example 3</div>
								</div>
								<div class="field field-half">
									<input type="text" class="note-4" name="password">
									<label class="required">Apellidos</label>
									<div class="note note-4">Example 4</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

Estoy tratando de mostrar las nota o información adicional así como la siguiente demostración si hace click en nombre y en apellido la nota se muestra en un solo lugar fijo en la misma dirección del input.

¿Cómo puedo realizarlo de aquella manera?

1 respuesta 1

3

Quita esta línea de .note en el css:

left: 200%;

Y pon las siguientes:

.note-1, .note-3 {
    left: 200%;
}
.note-2, .note-4 {
    left: 100%;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.