Merge branch 'jmagnusson-accept-dom-element'

Author: mike-engel

README.md

@@ -131,6 +131,7 @@ isotip.positionTooltip( '.tooltip', '.tooltip-click', 'left' );
 
 ## Changelog
 
+- 1.2.6 - Support passing in a DOM element to content
 - 1.2.2 - Fixes an edge case when trying to close a tooltip and it didn't exist
 - 1.2.0 - Adds a scrollContainer option for tooltips inside scolling elements
 - 1.1.2 - Reduces the default tooltip removal delay to 200ms

dist/isotip.js

@@ -301,7 +301,9 @@ module.exports = {
 
         // If the supplied string should be interpreted as html, make an element for it...
         if ( ( this.options.html || html ) && content ) {
-            if ( this.getTagName( content )) {
+            if ( this.isElement( content )) {
+                tooltipContent = content;
+            } else if ( this.getTagName( content )) {
                 tooltipContent = this.createDOMElement( content );
             } else {
                 tooltipContent = this.createDOMElement( '<p class="tooltip-content">' + content + '</p>' );
@@ -339,7 +341,7 @@ module.exports = {
             this.currentTooltip = this.currentContainer.appendChild( tooltip );
         }
 
-        this.currentTrigger = trigger
+        this.currentTrigger = trigger;
 
         // Position the tooltip on the page
         this.positionTooltip( this.currentTooltip, this.currentTrigger, placement );
@@ -831,6 +833,23 @@ module.exports = {
         return /<([\w:]+)/.exec( html );
     },
 
+    /**
+     * isElement - Small function to determine if object is a DOM element.
+     * @version 1.2.6
+     * @example
+     * this.isElement( '<div></div>' );  # false
+     * @example
+     * this.isElement( this.createElement('div') );  # true
+     * @param  {string} obj - The object to check
+     * @return {boolean} - Whether or not the object is a DOM element.
+     * @api private
+     */
+    isElement: function getTagName( obj ) {
+        'use strict';
+
+        return !!( obj && obj.nodeType === 1 );
+    },
+
     /**
      * createDOMElement - Small function to transform an html string into an element
      * @version 1.0.0

dist/isotip.min.js

@@ -300,7 +300,9 @@ module.exports = {
 
         // If the supplied string should be interpreted as html, make an element for it...
         if ( ( this.options.html || html ) && content ) {
-            if ( this.getTagName( content )) {
+            if ( this.isElement( content )) {
+                tooltipContent = content;
+            } else if ( this.getTagName( content )) {
                 tooltipContent = this.createDOMElement( content );
             } else {
                 tooltipContent = this.createDOMElement( '<p class="tooltip-content">' + content + '</p>' );
@@ -830,6 +832,23 @@ module.exports = {
         return /<([\w:]+)/.exec( html );
     },
 
+    /**
+     * isElement - Small function to determine if object is a DOM element.
+     * @version 1.2.6
+     * @example
+     * this.isElement( '<div></div>' );  # false
+     * @example
+     * this.isElement( this.createElement('div') );  # true
+     * @param  {string} obj - The object to check
+     * @return {boolean} - Whether or not the object is a DOM element.
+     * @api private
+     */
+    isElement: function getTagName( obj ) {
+        'use strict';
+
+        return !!( obj && obj.nodeType === 1 );
+    },
+
     /**
      * createDOMElement - Small function to transform an html string into an element
      * @version 1.0.0

isotip.js

@@ -1,6 +1,6 @@
 {
   "name": "isotip",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "The javascript tooltip plugin with no dependencies",
   "main": "isotip.js",
   "repository": "https://github.com/datuhealth/isotip",

package.json

@@ -46,6 +46,8 @@
         <div>
             <span class="tooltip-click tooltip-left-edge" data-tooltip-content="Test content" data-tooltip-placement="left">This is a tooltip too far to the left</span>
         </div>
+        <div class="tooltip-empty-insert-point">
+        </div>
         <div class="scroll-container" style="overflow:scroll;height:300px;">
             <div class="tooltip-container" style="height: 600px;">
                 <span class="tooltip-click button tooltip-scroll-container" style="margin-top: 100px;display:block;" data-tooltip-content="I'm In a scrolling container!" data-tooltip-placement="top" data-tooltip-container=".scroll-container" data-tooltip-scrollContainer=".scroll-container">In a scrolling container</span>

test/index.html

@@ -85,6 +85,16 @@ describe( 'tooltip markup', function() {
         expect( tooltipTmp.childNodes[ 1 ].tagName ).to.equal( 'SPAN' );
         expect( tooltipTmp.childNodes[ 1 ] instanceof Element ).to.equal( true );
     });
+
+    it( 'should accept a DOM Element', function() {
+        isotipJS.init();
+
+        var selector = '.tooltip-empty-insert-point',
+            el = document.createElement( 'p' ),
+            config = { html: true, content: el },
+            tooltipTmp = isotipJS.open( selector, config );
+        expect( tooltipTmp.childNodes[ 1 ].tagName ).to.equal( 'P' );
+    });
 });
 
 describe( 'tooltip options', function() {