<input id="<%= id %>" 
       type="submit" 
       class="form-submit <%= classes %>" 
       value="<%= val %>"
       aria-disabled="<%= disabled_initially %>"
       aria-describedby="<%= id %>_tip" />

<div role="tooltip" id="<%= id %>_tip" class="submit-tooltip">
  <div class="arrow-left"></div>
  <span class="submit-tooltip-msg"><%= tooltip %></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('aria-disabled') == 'true'){
        e.preventDefault();
        $("#<%= id %>_tip").attr('role', 'tooltip');
      }else{
        $("#<%= id %>_tip").attr('role', '');
      }
    });
  });
</script>