title: Tool or Help-tip not applying to all multiple fields
body: <p><strong>Updated image after code change</strong></p>
  
  <p><a href="https://i.stack.imgur.com/BmItJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BmItJ.png" alt="enter image description here"></a></p>
  
  <p>But from my below code  ,the 'help-tip' class appears for only one field.</p>
  
  <p>The existing help tip which is appearing next to 'Enter Code number' field shows 'Enter Reg number!' on hover.  Why is it not applying for both the fields.</p>
  
  <p><strong>UPDATED as per comments</strong></p>
  
  <pre><code>&lt;div class="tabbed" &gt;
  
    &lt;input name="tabbed" id="tabbed1" type="radio" checked&gt;
    &lt;section&gt;
      &lt;h1&gt;
        &lt;label for="tabbed1"&gt;Legal Details&lt;/label&gt;
      &lt;/h1&gt;
      &lt;div&gt;
          &lt;form name="Legal_details"&gt;
              &lt;!--Begin: Help tip--&gt;
                  &lt;span class="help-tip"&gt;
                  &lt;span &gt; Enter your code number! &lt;/span&gt;
                  &lt;/span&gt;
              &lt;!--End: Help tip--&gt;    
                  &lt;select selected="selected" name="code_number"&gt;
                      &lt;option value="default"&gt;Enter Code number *&lt;/option&gt;
                      &lt;option value="title1"&gt;Code 1&lt;/option&gt;
                      &lt;option value="title2"&gt;Code 2&lt;/option&gt;
                      &lt;option value="title3"&gt;Code 3&lt;/option&gt;
                      &lt;option value="title4"&gt;Code 4&lt;/option&gt;
                  &lt;/select&gt;&lt;/br&gt;&lt;/br&gt;
  
              &lt;span class="help-tip"&gt;
                  &lt;span &gt; Enter Reg number! &lt;/span&gt;
              &lt;/span&gt; 
              &lt;input type="text" name="registration_number" size="25" placeholder="Registration Number *" required&gt;&lt;/br&gt;&lt;/br&gt;             
         &lt;/form&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my .css:</p>
  
  <p><strong>UPDATED as per comments</strong></p>
  
  <pre><code>.help-tip{
      position: relative;   /*UPDATED*/
      display:inline-block; 
      opacity:0.9;          
      top: 2px;
      left:253px;
      text-align: center;
      background-color: #BCDBEA;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: 14px;
      line-height: 26px;
      cursor: default;
  }
  
  .help-tip:before{
      content:'?';
      font-weight: bold;
      color:#fff;
  }
  
  .help-tip:hover span{
      display:block;
      transform-origin: 100% 0%;
      -webkit-animation: fadeIn 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
  
  }
  
  .help-tip span{
      display: none;
      text-align: left;
      background-color: #1E2021;
      padding: 5px;
      width: 200px;
      position: absolute;
      border-radius: 3px;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
      left: 5px;            /* edited */
      color: #FFF;
      font-size: 13px;
      line-height: 1.4;
  }
  
  .help-tip span:before{
      position: absolute;
      content: '';
      width:0;
      height: 0;
      border:6px solid transparent;
      border-bottom-color:#1E2021;
      left:10px;
      top:-12px;
  }
  
  .help-tip span:after{
      width:100%;
      height:40px;
      content:'';
      position: absolute;
      top:-40px;
      left:0;
  }
  </code></pre>