title: Tooltipster for both showing tooltips for fields and showing errors in Jquery validation
body: <p>I'm using the tooltipster plugin to show fields's hints and also another tooltip at bottom to show errors from jquery validate plugin, but for some reason all the messages updates are happening on the first error tooltip.</p>
  
  <p>What am I missing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    // initialize tooltipster on text input elements
    $('input').tooltipster();
    var tooltipsterErrorMsg = [];
    
    // initialize validate plugin on the form
    $('#myform').validate({
      showErrors: function(errorMap, errorList) {
        // Clean up any tooltips for valid elements
        $.each(this.validElements(), function (index, element) {
          if (index &lt; tooltipsterErrorMsg.length) {
           tooltipsterErrorMsg[index].hide();
          }
        });
       
        // Create new tooltips for invalid elements
        $.each(errorList, function (index, error) {
          if (index === tooltipsterErrorMsg.length) {
            var tooltipObject = $(error.element).tooltipster({
              trigger: 'custom',
              multiple: true,
              position: 'bottom'
            });
            
            tooltipsterErrorMsg.push(tooltipObject[0]);
          }
          tooltipsterErrorMsg[index].content(errorList[index].message).show();
       });
      },
      rules: {
        field1: {
          required: true,
          email: true
        },
        field2: {
          required: true,
          minlength: 5
        }
      },
      submitHandler: function (form) { // for demo
        alert('valid form');
        return false;
      }
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myform {
      margin: 100px;
  }
  input {
      margin: 20px;
  }
  a {
      display: block;
      position: absolute;
      bottom: 0;
  }
  
  .error {
    color: #900;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;form id="myform"&gt;
      &lt;input type="text" name="field1" title="Tooltip teste 1" /&gt;
      &lt;input type="text" name="field2" title="Tooltip teste 2" /&gt;
      &lt;br/&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/macmessa/m368ntxw/" rel="nofollow">http://jsfiddle.net/macmessa/m368ntxw/</a></p>