add show/hide to tooltip

app/assets/javascripts/discourse/components/d-button.js.es6

@@ -8,14 +8,14 @@ export default Ember.Component.extend({
   classNameBindings: [':btn', 'noText'],
   attributeBindings: ['disabled', 'translatedTitle:title'],
 
-  noText: Ember.computed.empty('translatedLabel'), //if translatedLable = null/empty then noText = true
+  noText: Ember.computed.empty('translatedLabel'),
 
-  @computed("title") //this.get('title')
+  @computed("title")
   translatedTitle(title) {
     if (title) return I18n.t(title);
   },
 
-  @computed("label")//this.get('label')
+  @computed("label")
   translatedLabel(label) {
     if (label) return I18n.t(label);
   },

app/assets/javascripts/discourse/controllers/edit-category.js.es6

@@ -8,6 +8,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
   saving: false,
   deleting: false,
   panels: null,
+  hiddenTooltip: true,
 
   _initPanels: function() {
     this.set('panels', []);
@@ -16,6 +17,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
   onShow() {
     this.changeSize();
     this.titleChanged();
+    this.set('hiddenTooltip', true);
   },
 
   changeSize: function() {
@@ -101,6 +103,13 @@ export default Ember.Controller.extend(ModalFunctionality, {
           self.set('deleting', false);
         }
       });
+    },
+
+    toggleDeleteTooltip() {
+      // check if is touch device
+      if ( $('html').hasClass('discourse-touch') ) {
+        this.toggleProperty('hiddenTooltip');
+      }
     }
   }
 

app/assets/javascripts/discourse/templates/modal/edit-category.hbs

@@ -30,10 +30,12 @@
     {{else}}
       <div class="disable_info_wrap">
         {{d-button disabled=deleteDisabled
+                   class="disable-no-hover"
+                   action="toggleDeleteTooltip"
                    icon="question-circle"
                    label="category.delete"}}
 
-        <div class="cannot_delete_reason">
+        <div class="cannot_delete_reason {{if hiddenTooltip "hidden" ""}}">
           {{{model.cannot_delete_reason}}}
         </div>
       </div>

app/assets/stylesheets/common/base/modal.scss

@@ -332,7 +332,33 @@
       margin-bottom: 10px;
     }
   }
+
+  .disable_info_wrap {
+    position: relative;
+    display: inline-block;
+    float: right;
+
+    .cannot_delete_reason {
+      position: absolute;
+      background: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%));
+      color: dark-light-choose(scale-color($primary, $lightness: 100%), scale-color($secondary, $lightness: 0%));
+      text-align: center;
+      border-radius: 2px;
+      padding: 12px 8px;
+
+      &::after {
+        top: 100%;
+        left: 57%;
+        border: solid transparent;
+        content: " ";
+        position: absolute;
+        border-top-color: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%));
+        border-width: 8px;
       }
+    }
+  }
+}
+
 
 .incoming-email-modal {
   .btn {

app/assets/stylesheets/common/foundation/helpers.scss

@@ -76,3 +76,11 @@
 .clickable {
   cursor: pointer;
 }
+
+
+// Buttons
+// ---------------------------------------------------
+.disable-no-hover:hover {
+  background: dark-light-choose(scale-color($primary, $lightness: 90%), scale-color($secondary, $lightness: 60%));;
+  color: $primary;
+}

app/assets/stylesheets/desktop/modal.scss

@@ -116,36 +116,20 @@
       }
     }
   }
+
   .disable_info_wrap {
-    position: relative;
-    display: inline-block;
-    float: right;
     margin-top: -70px;
     padding-top: 70px;
+    @media all and (min-width: 550px) {
       padding-left: 170px;
+    }
 
     .cannot_delete_reason {
-      position: absolute;
       top: 4px;
       right: 4px;
       max-width: 380px;
       min-width: 300px;
-      background: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%));
-      color: dark-light-choose(scale-color($primary, $lightness: 100%), scale-color($secondary, $lightness: 0%));
-      text-align: center;
-      border-radius: 2px;
-      padding: 12px 8px;
       display: none;
-
-      &::after {
-        top: 100%;
-        left: 57%;
-        border: solid transparent;
-        content: " ";
-        position: absolute;
-        border-top-color: dark-light-choose(scale-color($primary, $lightness: 10%), scale-color($secondary, $lightness: 10%));
-        border-width: 8px;
-      }
     }
 
     @include hover {

app/assets/stylesheets/mobile/modal.scss

@@ -133,6 +133,12 @@
       }
     }
   }
+
+  .disable_info_wrap .cannot_delete_reason {
+    top: -114px;
+    right: 8px;
+    min-width: 200px;
+  }
 }
 
 .tabbed-modal {