Add and fix tests

Author: mike-engel

CHANGELOG.md

@@ -4,7 +4,7 @@ Changelog
 # 1.3.0
 - Add a configuration option to disallow a tooltip to close by normal mouse/keyboard events.
 
-This should only be used if you're going to close a tooltip programmatically. There are two ways to set this option.
+**This should only be used if you're going to close a tooltip programmatically**. There are two ways to set this option.
 
 1. On the trigger element. Set the `data-tooltip-autoclose` attribute to false.
 2. Programmatically. When calling `isotip.open()`, set `autoClose` to false in the options object.

README.md

@@ -81,7 +81,7 @@ This sets the element that will have a scroll event bound to it. If your tooltip
 
 ### **`data-tooltip-autoclose`**
 
-If set to false, the tooltip will *not* close unless you do so programmatically with `isotip.close()`.
+If set to false, the tooltip will *not* close unless you do so programmatically with `isotip.close()`. Normal tooltips will not open until the open one has been closed!
 
 ### **`init( config )`**
 
@@ -120,7 +120,7 @@ var config = {
     title: 'Tooltip title', // the text to go in the title, if any
     container: document.querySelector('.container'), // the container to append the tooltip to
     scrollContainer: document.querySelector('.scroll-container'), // the container to bind the scroll event to
-    autoClose: false // set to false if you only want to close the tooltip programmatically
+    autoClose: false // set to false if you only want to close the tooltip programmatically. Normal tooltips won't open until the open one has been closed!
 };
 
 isotip.open( '.tooltip', config );

dist/isotip.js

@@ -292,6 +292,11 @@ module.exports = {
       return
     }
 
+    // If there's a tooltip open with autoClose set to false, don't open a new one
+    if (this.currentTooltip && this.currentTooltip.getAttribute('data-autoclose') === 'false') {
+      return
+    }
+
     tooltip.appendChild(this.createDOMElement('<div class="tooltip-accent"></div>'))
 
     // If there should be an added class name, add it

dist/isotip.min.js

@@ -274,7 +274,7 @@ <h2 class="h2" id="api">API</h2>
             </dd>
             <dt><pre><code>data-tooltip-autoclose</code></pre></dt>
             <dd>
-                <p>If set to false, the tooltip won't close until you programmatically close it with <code>isotip.close()</code>.</p>
+                <p>If set to false, the tooltip won't close until you programmatically close it with <code>isotip.close()</code>. Note that normal tooltips will not open until the open tooltip has been closed!</p>
             </dd>
         </dl>
         <p>Alternatively, programattic creation and destruction of tooltips is available.</p>
@@ -311,7 +311,7 @@ <h2 class="h2" id="api">API</h2>
   title: 'Tooltip title', // the text to go in the title, if any
   container: document.querySelector('.container'), // the container to append the tooltip to
   scrollContainer: document.querySelector('.scroll-container'), // the container to bind the scroll event to
-  autoClose: false // set to false if you only want to close the tooltip programmatically
+  autoClose: false // set to false if you only want to close the tooltip programmatically. Normal tooltips will not open until this is closed!
 };
 
 isotip.open( '.tooltip', config );</code></pre>

index.html

@@ -291,6 +291,11 @@ module.exports = {
       return
     }
 
+    // If there's a tooltip open with autoClose set to false, don't open a new one
+    if (this.currentTooltip && this.currentTooltip.getAttribute('data-autoclose') === 'false') {
+      return
+    }
+
     tooltip.appendChild(this.createDOMElement('<div class="tooltip-accent"></div>'))
 
     // If there should be an added class name, add it

isotip.js

@@ -335,11 +335,10 @@ describe('tooltip position', function () {
 
 describe('tooltip triggers', function () {
   beforeEach(function () {
-    var tooltip = document.querySelector('.tooltip')
+    isotip.currentTooltip && isotip.currentTooltip.parentNode.removeChild(isotip.currentTooltip)
 
-    if (tooltip) {
-      tooltip.parentNode.removeChild(tooltip)
-    }
+    isotip.currentTooltip = null
+    isotip.currentTrigger = null
   })
 
   it('should open a tooltip on click', function () {
@@ -448,7 +447,7 @@ describe('tooltip triggers', function () {
       }
     })
 
-    var trigger = document.querySelector('.tooltip-click.tooltip-no-close')
+    var trigger = document.querySelector('.tooltip-click')
     var tooltipTmp = isotip.open(trigger, { autoClose: false })
 
     eventFire(trigger, 'click')
@@ -460,6 +459,52 @@ describe('tooltip triggers', function () {
     }, isotip.options.removalDelay + 1)
   })
 
+  it('should not open another tooltip if one with autoClose set to false is already open', function (done) {
+    isotip.init({
+      placement: 'top',
+      windowPadding: {
+        top: 10
+      }
+    })
+
+    var trigger = document.querySelector('.tooltip-click.tooltip-no-close')
+    var tooltipTmp = isotip.open(trigger)
+
+    expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+
+    var tooltipTmp2 = isotip.open(document.querySelector('.tooltip-click'))
+
+    window.setTimeout(function () {
+      expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+      expect(document.documentElement.contains(tooltipTmp2)).to.not.be.ok
+
+      done()
+    }, isotip.options.removalDelay + 1)
+  })
+
+  it('should not open another tooltip programmatically if one with autoClose set to false is already open', function (done) {
+    isotip.init({
+      placement: 'top',
+      windowPadding: {
+        top: 10
+      }
+    })
+
+    var trigger = document.querySelector('.tooltip-click')
+    var tooltipTmp = isotip.open(trigger, { autoClose: false })
+
+    expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+
+    var tooltipTmp2 = isotip.open(document.querySelector('.tooltip-default'))
+
+    window.setTimeout(function () {
+      expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+      expect(document.documentElement.contains(tooltipTmp2)).to.not.be.ok
+
+      done()
+    }, isotip.options.removalDelay + 1)
+  })
+
   it('should not close a tooltip on click on a child element in toolip', function (done) {
     isotip.init({
       placement: 'top',
@@ -592,6 +637,29 @@ describe('tooltip triggers', function () {
     }, isotip.options.removalDelay + 1)
   })
 
+  it('should not open a new tooltip on mouseover if one with autoClose set to false exists', function (done) {
+    isotip.init({
+      placement: 'top',
+      windowPadding: {
+        top: -10
+      }
+    })
+
+    var trigger = document.querySelector('.tooltip-click.tooltip-no-close')
+    var tooltipTmp = isotip.open(trigger)
+
+    expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+
+    var tooltipTmp2 = isotip.open(document.querySelector('.tooltip-hover'))
+
+    setTimeout(function () {
+      expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+      expect(document.documentElement.contains(tooltipTmp2)).to.not.be.ok
+
+      done()
+    }, isotip.options.removalDelay + 1)
+  })
+
   it('should not close a tooltip on mouseout if autoClose is set to false programmatically', function (done) {
     isotip.init({
       placement: 'top',
@@ -612,6 +680,29 @@ describe('tooltip triggers', function () {
     }, isotip.options.removalDelay + 1)
   })
 
+  it('should not open a new tooltip on mouseover programmatically if one with autoClose set to false exists', function (done) {
+    isotip.init({
+      placement: 'top',
+      windowPadding: {
+        top: -10
+      }
+    })
+
+    var trigger = document.querySelector('.tooltip-click')
+    var tooltipTmp = isotip.open(trigger, { autoClose: false })
+
+    expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+
+    var tooltipTmp2 = isotip.open(document.querySelector('.tooltip-hover'))
+
+    setTimeout(function () {
+      expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+      expect(document.documentElement.contains(tooltipTmp2)).to.not.be.ok
+
+      done()
+    }, isotip.options.removalDelay + 1)
+  })
+
   it('should open a tooltip on focus', function () {
     isotip.init({
       placement: 'top',
@@ -673,7 +764,30 @@ describe('tooltip triggers', function () {
     }, isotip.options.removalDelay + 1)
   })
 
-  it('should not close a tooltip on blur if autoClose is set to false programmatically', function (done) {
+  it('should open a new tooltip on blur if one with autoClose set to false exists', function (done) {
+    isotip.init({
+      placement: 'top',
+      windowPadding: {
+        top: 10
+      }
+    })
+
+    var trigger = document.querySelector('.tooltip-click.tooltip-no-close')
+    var tooltipTmp = isotip.open(trigger)
+
+    expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+
+    var tooltipTmp2 = isotip.open(document.querySelector('.tooltip-focus'))
+
+    setTimeout(function () {
+      expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+      expect(document.documentElement.contains(tooltipTmp2)).to.not.be.ok
+
+      done()
+    }, isotip.options.removalDelay + 1)
+  })
+
+  it('should not close a tooltip on focus if autoClose is set to false programmatically', function (done) {
     isotip.init({
       placement: 'top',
       windowPadding: {
@@ -692,4 +806,27 @@ describe('tooltip triggers', function () {
       done()
     }, isotip.options.removalDelay + 1)
   })
+
+  it('should open a new tooltip programmatically on focus if one with autoClose set to false exists', function (done) {
+    isotip.init({
+      placement: 'top',
+      windowPadding: {
+        top: 10
+      }
+    })
+
+    var trigger = document.querySelector('.tooltip-click')
+    var tooltipTmp = isotip.open(trigger, { autoClose: false })
+
+    expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+
+    var tooltipTmp2 = isotip.open(document.querySelector('.tooltip-focus'))
+
+    setTimeout(function () {
+      expect(document.documentElement.contains(tooltipTmp)).to.be.ok
+      expect(document.documentElement.contains(tooltipTmp2)).to.not.be.ok
+
+      done()
+    }, isotip.options.removalDelay + 1)
+  })
 })