HTML Form How to - Show content when hover input text field

Question

We would like to know how to show content when hover input text field.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@-webkit-keyframes showTooltip {<!--from w ww  .ja  v a  2  s.c  o  m-->
  from {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes showTooltip {
  from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes showTooltip {
  from {opacity: 0;}
    to {opacity: 1;}
}
.form-item {
  position: relative;
}
.message-error:after {
  content: attr(data-tooltip);
  position: absolute;
  top: 0;
  left: 10%;
  display: none;
  padding: 1em 2em;
  color: white;
}

.message-error:hover:after {
  display: block;
  -webkit-animation: showTooltip 0.35s ease-in-out;
  -moz-animation: showTooltip 0.35s ease-in-out;
  animation: showTooltip 0.35s ease-in-out;
}
.message-error:after {
  background-color: red;
}
</style>
</head>
<body>
  <div class="form-item message-error" data-tooltip="your tooltip text here">
    <div class="description">Hover and type in some text</div>
    <input type="text" class="form-text" maxlength="128" size="20">
  </div>
</body>
</html>

The code above is rendered as follows: