Update
Extrañamente colocar el icono al lado del label
es más complicado, pero la lógica es casí la misma
/* SOLO PARA LA DEMO NO COPIAR ESTO */
input{
height:32px;
width:100%;
display:block;
}
label {
width:100%;
padding:10px 0;
display:block;
}
/* ====================================== */
p.form-row:has(>label[for="billing_phone"]) {
position:relative;
}
p.form-row:has(>label[for="billing_phone"]):after{
width: 22px;
height: 22px;
top: 8px;
left: 79px;
border-radius: 50%;
background-color: #927124;
content: "?";
color: #F1EAD6;
display: block;
position: absolute;
display: grid;
justify-content: center;
align-items: center;
font-weight: 900;
}
p.form-row:has(>label[for="billing_phone"]):before{
display: block;
content: " El número de teléfono lo necesitamos por si tuviéramos problemas con el pedido";
visibility: collapse;
width: 120px;
background-color: rgb(93, 69, 4);
color: #fff;
text-align: center;
border-radius: 3px;
padding: 10px;
font-size:0.9em;
position: absolute;
z-index: 9990;
left: 99px;
top: -13px;
box-shadow: 0 5px 10px rgb(93, 69, 4);
}
p.form-row:has(label[for="billing_phone"]):hover:before{
visibility: visible;
}
p.form-row:has(label[for="billing_phone"]:hover, span:hover):before{
visibility: collapse;
}
<p class="form-row form-row-wide validate-requerid- valida-phone">
<label for="billing_phone" class>
Teléfono
<abbr class="requerid" title="obligatorio">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="tel" class="input-text" >
</span>
<strong></strong>
</p>
<p class="form-row form-row-wide validate-requerid- valida-phone">
<label for="billing_otrocampo" class>
Otro campo
<abbr class="requerid" title="obligatorio">*</abbr>
</label>
<span class="woocommerce-input-wrapper">
<input type="tel" class="input-text" >
</span>
<strong></strong>
</p>