Implement tooltips for suppliers table view

app/views/suppliers/sections/tables_view.html.slim

@@ -4,15 +4,21 @@
   .span12
     .well.section-tables-container.section-tables-active
       .section-manage-tables.pull-right= link_to content_tag(:span, '', class: 'icon-pencil'), manage_tables_suppliers_section_path(@section), class: 'btn btn-mini'
-      - for table in Table.enrich_active_list_id(@section.tables)
+      - for table in @tables
         .section-table.hide[
           class="section-table-list-#{table.active_list_id}" id="section-table-#{table.id}" 
           data-position-x=table.position_x data-position-y=table.position_y data-table-id=table.id]
-          .table-number = link_to table.number, suppliers_table_path(table)
+          .table-number = table.number
           .status-icons
             span.needs_payment.icon-flag
             span.needs_help.icon-bell
             span.active_order.icon-glass
+#section-table-menu-container.hide
+  - @tables.each do |table|
+    .section-table-menu-content class="section-table-menu-#{table.id} section-table-list-#{table.active_list_id}"
+      button.btn.btn-info.list-is-helped.hide Question answered!
+
+    
 - content_for :footer do
   javascript:
     var current_section_id = '#{@section.id}';
@@ -24,6 +30,38 @@
       active_section_container.css('height', #{@section.height/@section.width}*active_section_container.width());
       active_section_container.find('.section-table').each(function(){
         Qsupplier.position_table_in_active_section(active_section_container, $(this), false);
+        var table_id;
+        var match = $(this).attr('id').match(/section-table-(\w+)/);
+        if(!match || match.length < 2) return;
+        table_id = match[1];
+
+        $(this).qtip({
+          content: {
+            text: '#{spinner}',
+            ajax: {
+              url: '#{table_actions_suppliers_section_path(@section)}',
+              data: {table_id: table_id},
+              success: function(data, status){
+                var container = $('<div></div>');
+                container.html(data); // Create a container to parse translation data
+                setTranslations(container);
+                this.set('content.text', container.html());
+              }, 
+              once: false
+            },
+            title: {
+              text: t('section.tables_view.table_actions.title'),
+              button: true
+            }
+          },
+          show: {
+            event: 'click'
+          },
+          hide: 'unfocus',
+          style: {
+            classes: 'qtip-wiki qtip-light qtip-shadow'
+          }
+        })
       });
       Qsupplier.update_section_tables_view('#{@section.id}');
       Qsupplier.watch_events();