title: Notification show as input textbox click with jquery patterns
body: <blockquote>
    <p>I don't know that I will explain my question well or not because I'm new on stack overflow. I've read the T&amp;C and have tried my best to explain what I want to accomplish. I hope you understand what I'm asking.</p>
  </blockquote>
  
  <p>I would like to create a system using javascript or jQuery that will display a popup box on the top or bottom of a browser window with custom text and colors defined in my css styles. The "notification" would tell users to about what they need to do in the text box like "Write your email" etc.</p>
  
  <p>This is the code that will show you what I'd like them to look like:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="warning"id="notification"&gt;&lt;span&gt;This is default message show first time&lt;/span&gt;&lt;/div&gt;
  
  &lt;div class="information" id="notification"&gt;&lt;span&gt;Enter your registered Email ID&lt;/span&gt;&lt;/div&gt;
  
   &lt;div class="error" id="notification"&gt;&lt;span&gt;Email ID is incorrect&lt;/span&gt;&lt;/div&gt;
  
  &lt;div class="error" id="notification"&gt;&lt;span&gt;Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.&lt;/span&gt;&lt;/div&gt;
  
  &lt;input type="text" name="email" id="username"/&gt;
  &lt;input type="text" name="mobile" id="phone"/&gt;
  &lt;input type="submit" id="ok" name="done"/&gt;
  
  &lt;style&gt;#notification {
   position:fixed;
   width: 100%;
   text-align: center; 
   z-index:99;
   overflow:hidden; 
  }
  #notification h2{
   font-size:16px; 
   font-weight:400
  }
  /*#notification.showNote{
   width:50%; 
   left:230px
  }*/
      /*error, info, notice, alert*/
  .success,.warning,.error,.information{display: block; position: relative; padding:5px 20px}
  .information{background-color:#3bafda}
  .success{background-color:#8cc152}
  .warning{background-color:#f6bb42}
  .error{background-color:#e9573f}
  .notify h2{color:#fff}&lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>