<input id="<%= id %>" 
       type="submit" 
       class="form-submit" 
       clickable="<%= disabled_initially %>"
       value="<%= val %>"
       artia-describedby="<%= id %>_tip" />

<div role="tooltip" id="<%= id %>_tip" class="submit-tooltip">
  <div class="arrow-left"></div>
  <span class="submit-tooltip-msg">
    <%= _('You can not continue until you have filled in all of the required information.') %>
  </span>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    // Allow the 'button disabled' tooltip to appear if the button is NOT clickable
    $("#<%= id %>").on('click focus', function(e){
      if($(this).attr('clickable') != 'true'){
        e.preventDefault();
        $("#<%= id %>_tip").attr('role', 'tooltip');
      }else{
        $("#<%= id %>_tip").attr('role', '');
      }
    });
  });
</script>