Is there some kind of ALT property for a form field in HTML?

Question

I have a form with some fields that will be filled by the user.

Sometimes the filled-in information is larger than the field.

I wonder if there is any strategy to mouse over the field, and show the full value filled by the user, with a behavior that reminds the ALT property of HTML.

Answer 1

With Html I don’t know if this is possible, but, nothing prevents you create as in the example below that is with Javascript:

let input = document.getElementById('entrada');
let span = document.getElementsByTagName('span')[0];
span.style.display = 'none';

input.addEventListener('mouseover', () => {
  if(input.value.length > 10) {
    span.style.display = 'block';
    span.innerHTML = input.value;
  }
});

input.addEventListener('mouseout', () => {
    span.style.display = 'none';
});

span {
  color: #535250;
  background-color: #faba6b;
  padding: 3px;
  margin-top: 5px;
}

<input type="text" id="entrada">
<span></span>

Passing the code to the Angular would be like this with a simple example:

HTML

<input type="text" (mouseover)="showValue()" (mouseout)="hideValue()" #entrada>
<span [hidden]="visible" >{{ entrada.value }}</span>

TS

 @ViewChild("entrada", { static: false }) entrada: ElementRef;
 public visible = true;

 ngOnInit() {}

 showValue() {
   if (this.entrada.nativeElement.value.length > 10) this.visible = false;
 }

 hideValue() {
   this.visible = true;
 }