2
Good afternoon, you guys. My question is the following, I am creating a payment form, I have the following code:
$(".spanhover").hover(function(event) {
var divid = "#popup1"
$(divid).css({top: event.clientY, left: event.clientX}).show();
}, function() {
var divid = "#popup1"
$(divid).hide();
});.credit-card-box .panel-title {
display: inline;
font-weight: bold;
}
.credit-card-box .form-control.error {
border-color: red;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
.credit-card-box label.error {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
.credit-card-box .payment-errors {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
.credit-card-box label {
display: block;
}
.credit-card-box .display-table {
display: table;
}
.credit-card-box .display-tr {
display: table-row;
}
.credit-card-box .display-td {
display: table-cell;
vertical-align: middle;
width: 50%;
}
.credit-card-box .panel-heading img {
min-width: 180px;
}
.spanhover {
cursor: pointer;
}
.popup {
position: absolute;
display: none;
width: 50px;
height: 50px;
border: 1px solid #000;
z-index: 999;
background-color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="panel panel-default credit-card-box">
<div class="panel-heading" style="min-height: 40px;">
<div class="col-md-7" >
<h3 class="panel-title display-td">Meio de pagamento</h3>
</div>
<div class="col-md-5">
<i class="fa fa-2x fa-cc-visa"></i><i class="fa fa-2x fa-cc-mastercard"></i>
</div>
</div>
<div class="panel-body">
<div class="row text-center">
<h4>Dados do proprietário do cartão*</h4>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="cardNumber" style=" top:-15px !important;
font-size:14px !important;
color:#5264AE !important;">Nome completo</label>
<div class="form-group">
<input
type="text"
class="form-control"
name="cardName"
placeholder="Nome (conforme escrito no cartão)"
autocomplete="cc-name"
required autofocus
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<label for="cardNumber" style=" top:-15px !important;
font-size:14px !important;
color:#5264AE !important;">cpf</label>
<div class="form-group">
<input
type="tel"
class="form-control"
name="cpf"
placeholder="CPF"
autocomplete="cpf"
required
/>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="cardNumber" style=" top:-15px !important;
font-size:14px !important;
color:#5264AE !important;">Nascimento</label>
<div class="form-group">
<input
type="tel"
class="form-control"
name="birthDate"
placeholder="dd/mm/aaaa"
autocomplete="dt-nasc"
required
/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="cardNumber" style=" top:-15px !important;
font-size:14px !important;
color:#5264AE !important;">Número do cartão</label>
<div class="input-group">
<input
type="tel"
class="form-control"
name="cardNumber"
placeholder="Número do cartão"
autocomplete="cc-number"
required
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="form-group">
<label for="cardExpiry" style=" top:-15px !important;
font-size:14px !important;
color:#5264AE !important;"><span class="hidden-xs">Expira em</span><span class="visible-xs-inline">Data</span></label>
<input
type="tel"
class="form-control"
name="cardExpiry"
placeholder="MM / AA"
autocomplete="cc-exp"
required
/>
</div>
</div>
<div class="popup" id="popup1" style="display:none;">test1</div>
<div class="col-xs-5 col-md-5 pull-right">
<div class="form-group">
<label for="cardCVC" class="spanhover" id="hover1" style=" top:-15px !important;
font-size:14px !important;
color:#5264AE !important;">CVC</label>
<input
type="tel"
class="form-control"
name="cardCVC"
placeholder="CVC"
autocomplete="cc-csc"
required
/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p class="small btn-danger text-center">* estes dados não são armazenados.</p>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-xs-12">
<p class="payment-errors"></p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="submit" class="btn btn-success btn-block" value="Finalizar">
</div>
</div>
</div>
</div>
</body>
</html>The idea was to show an image of how to find the CVC on the card, so that would put it in a div that would appear when passing the mouse over the CVC field, the result is that the div accompanies the cursor while it is on top of the label, but I got stuck and from here I can not pass... someone can give me a light?
I particularly do not see the need for the div to accompany the mouse by the label, until the label is small, only has 3 letters.
– LeAndrade
I intend to use this in other points of the system
– Alvaro Alves