[feature] disabled attribute

.travis.yml

@@ -7,11 +7,14 @@ sudo: false
 
 cache:
   directories:
-    - node_modules
+    - $HOME/.npm
+    - $HOME/.cache # includes bowers cache
 
 env:
-  - EMBER_TRY_SCENARIO=default
+  # we recommend testing LTS's and latest stable release (bonus points to beta/canary)
   - EMBER_TRY_SCENARIO=ember-1.13
+  - EMBER_TRY_SCENARIO=ember-lts-2.4
+  - EMBER_TRY_SCENARIO=ember-lts-2.8
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary
@@ -25,7 +28,9 @@ matrix:
 before_install:
   - npm config set spin false
   - npm install -g bower
+  - bower --version
   - npm install phantomjs-prebuilt
+  - node_modules/phantomjs-prebuilt/bin/phantomjs --version
 
 install:
   - npm install
@@ -34,4 +39,4 @@ install:
 script:
   # Usually, it's ok to finish the test scenario without reverting
   #  to the addon's original dependency state, skipping "cleanup".
-  - ember try $EMBER_TRY_SCENARIO test --skip-cleanup
+  - ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup

README.md

@@ -144,6 +144,7 @@ Options are set as attributes on the tooltip/popover components. Current tooltip
 - [showOn](#show-on)
 - [spacing](#spacing)
 - [isShown](#is-shown)
+- [disabled](#disabled)
 - [hideDelay (popover only)](#hide-delay)
 - [enableLazyRendering](#enable-lazy-rendering)
 
@@ -359,6 +360,22 @@ This can be useful alongside `event='none'` when you only want to toolip to show
 {{tooltip-on-component isShown=showTooltip}}
 ```
 
+#### Disabled
+
+| Type    | Boolean |
+|---------|---------|
+| Default | false   |
+
+Gives you a way to disable any and all showing of the tooltip, even programatically via the `isShown` property.
+Setting this property to `true` will *not* show the tooltip, but will allow it to be shown using any of the available methods.
+
+This attribute is useful for disabling the tooltip in certain circumstances, like mobile if using ember-responsive or a similar addon.
+
+```hbs
+{{!--Binds the tooltip disabled attribute to the conditionalTooltipDisabled property--}}
+{{tooltip-on-component disabled=conditionalTooltipDisabled}}
+```
+
 #### Hide delay
 
 | Type    | Number |

addon/components/lazy-render-wrapper.js

@@ -32,6 +32,7 @@ const PASSABLE_PROPERTIES = [
 	'keepInWindow',
 	'side',
 	'showOn',
+  'disabled',
 	'spacing',
 	'isShown',
 	'tooltipIsVisible',
@@ -93,16 +94,16 @@ export default Ember.Component.extend({
 	enableLazyRendering: false,
 	_hasUserInteracted: false,
 	_hasRendered: false,
-	_shouldRender: computed('isShown', 'tooltipIsVisible', 'enableLazyRendering', '_hasUserInteracted', function() {
-		// if isShown, tooltipIsVisible, !enableLazyRendering, or _hasUserInteracted then
+	_shouldRender: computed('disabled', 'isShown', 'tooltipIsVisible', 'enableLazyRendering', '_hasUserInteracted', function() {
+		// if not disabled, isShown, tooltipIsVisible, !enableLazyRendering, or _hasUserInteracted then
 		// we return true and set _hasRendered to true because
 		// there is never a scenario where this wrapper should destroy the tooltip
 
 		if (this.get('_hasRendered')) {
 
 			return true;
 
-		} else if (this.get('isShown') || this.get('tooltipIsVisible')) {
+		} else if (!this.get('disabled') && (this.get('isShown') || this.get('tooltipIsVisible'))) {
 
 			this.set('_hasRendered', true);
 			return true;

addon/components/tether-tooltip-and-popover.js

@@ -51,6 +51,7 @@ export default EmberTetherComponent.extend({
   spacing: 10,
   tabindex: '0', // A positive integer (to enable) or -1 (to disable)
   isShown: false,
+  disabled: false,
   tooltipIsVisible: computed.deprecatingAlias('isShown', {
     id: 'tooltip-and-popover.tooltipIsVisible',
     until: '3.0.0',
@@ -106,12 +107,16 @@ export default EmberTetherComponent.extend({
 
   /* CPs */
 
-  'data-tether-enabled': computed('_isTetherEnabled', function() {
-    return this.get('_isTetherEnabled') ? 'true' : 'false';
+  'data-tether-enabled': computed('_isTetherEnabled', 'disabled', function() {
+    let disabled = this.get('disabled');
+    let isTetherEnabled = this.get('_isTetherEnabled');
+    return !disabled && isTetherEnabled ? 'true' : 'false';
   }),
 
-  'aria-hidden': computed('isShown', function() {
-    return this.get('isShown') ? 'false' : 'true';
+  'aria-hidden': computed('isShown', 'disabled', function() {
+    let disabled = this.get('disabled');
+    let isShown = this.get('isShown');
+    return !disabled && isShown ? 'false' : 'true';
   }),
 
   attachment: computed(function() {
@@ -330,9 +335,12 @@ export default EmberTetherComponent.extend({
 
   didUpdate() {
     this._super(...arguments);
+    let disabled = this.get('disabled');
 
     run.later(() => {
-      this.positionTether();
+      if (!disabled) {
+        this.positionTether();
+      }
       this.sendAction('onRender', this);
     }, this.get('_didUpdateTimeoutLength'));
   },
@@ -344,8 +352,13 @@ export default EmberTetherComponent.extend({
   @method setTimer
   */
 
-  setTimer: Ember.observer('isShown', function() {
+  setTimer: Ember.observer('isShown', 'disabled', function() {
     const isShown = this.get('isShown');
+    const disabled = this.get('disabled');
+
+    if (disabled) {
+      return;
+    }
 
     if (isShown) {
       this.startTether();
@@ -370,6 +383,9 @@ export default EmberTetherComponent.extend({
   }),
 
   show() {
+    if (this.get('disabled')) {
+      return;
+    }
     // this.positionTether() fixes the issues raised in
     // https://github.com/sir-dunxalot/ember-tooltips/issues/75
     this.positionTether();

config/ember-try.js

@@ -2,19 +2,35 @@
 module.exports = {
   scenarios: [
     {
-      name: 'default',
+      name: 'ember-1.13',
       bower: {
-        dependencies: { }
+        dependencies: {
+          'ember': '~1.13.0'
+        },
+        resolutions: {
+          'ember': '~1.13.0'
+        }
       }
     },
     {
-      name: 'ember-1.13',
+      name: 'ember-lts-2.4',
       bower: {
         dependencies: {
-          'ember': '~1.13.0'
+          'ember': 'components/ember#lts-2-4'
         },
         resolutions: {
-          'ember': '~1.13.0'
+          'ember': 'lts-2-4'
+        }
+      }
+    },
+    {
+      name: 'ember-lts-2.8',
+      bower: {
+        dependencies: {
+          'ember': 'components/ember#lts-2-8'
+        },
+        resolutions: {
+          'ember': 'lts-2-8'
         }
       }
     },

tests/dummy/app/templates/index.hbs

@@ -49,6 +49,7 @@
     <li><a href="#target">On any target</a></li>
     <li><a href="#delay">Show after delay</a></li>
     <li><a href="#duration">Show for duration</a></li>
+    <li><a href="#disabled">Disable toggling</a></li>
     <li><a href="#styling">Using custom styling</a></li>
     <li><a href="#async">Using async content</a></li>
     <li><a href="#popover">Using a popover instead of a tooltip</a></li>
@@ -138,6 +139,23 @@
 
 </div>
 
+<div class="page-content">
+  <h3 id="disabled">Disable toggling</h3>
+
+{{!-- BEGIN-SNIPPET using-with-disabled --}}
+{{#some-component}}
+  Tooltip won't show up on hover
+
+  {{#tooltip-on-component disabled=true enableLazyRendering=true}}
+    Here is the info!
+  {{/tooltip-on-component}}
+{{/some-component}}
+{{!-- END-SNIPPET --}}
+
+  {{code-snippet name='using-with-disabled.hbs'}}
+
+</div>
+
 <div class="page-content gray">
   <h3 id="styling">With custom styling</h3>
 

tests/integration/components/disabled-test.js

@@ -0,0 +1,54 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+import { assertHide, assertShow } from '../../helpers/sync/assert-visibility';
+import hbs from 'htmlbars-inline-precompile';
+
+const { run } = Ember;
+
+moduleForComponent('tooltip-on-element', 'Integration | Option | disabled', {
+  integration: true
+});
+
+test('It disables tooltip', function(assert) {
+
+  assert.expect(6);
+
+  this.set('disabled', true);
+  this.render(hbs`{{tooltip-on-element disabled=disabled}}`);
+
+  assertHide(assert, this);
+
+  /* Check hover doesn't trigger tooltip if disabled */
+  run(() => {
+    this.$().trigger('mouseover');
+  });
+
+  assertHide(assert, this);
+
+  /* Check hover triggers tooltip when not disabled */
+  this.set('disabled', false);
+
+  run(() => {
+    this.$().trigger('mouseover');
+  });
+
+  assertShow(assert, this);
+
+});
+
+test('It disables tooltip even if isShown', function(assert) {
+
+  assert.expect(4);
+
+  this.set('disabled', true);
+  this.render(hbs`{{tooltip-on-element disabled=disabled isShown=true}}`);
+
+  assertHide(assert, this);
+
+  run(() => {
+    this.set('disabled', false);
+  });
+
+  assertShow(assert, this);
+
+});