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?