html - Show the value of a field when onMouseOver?

Question

I have several inputs on the same row of a table. some of them eventually are "small" (or short). Particularly the INPUT DATE field value is very difficult to see because the allowed is shorter than the "10 characters + the calendar icon".

So, I would like to do a onMouseOver display the current value of the field. After user changes, it shows the newest value user selected.

How can I do that?

Answer 1

1. Save the date into javascript variable as datetime format.
2. If you are using hardcode HTML and CSS you can use tooltip. Refer here :https://www.w3schools.com/css/css_tooltip.asp
3. If you are using frameworks such as Angular. Just use MatTooltip