@br0ken/simpletooltip - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

demo/demo.js

 (function() {
   'use strict';
 
-  var container = document.querySelector('.dynamic');
-  var button = container.children[0];
+  var containerDynamic = document.querySelector('.dynamic');
+  var containerCustom = document.querySelector('.custom');
+  var button = containerDynamic.children[0];
+  var texts = [
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    'Short text',
+  ];
 
@@ -16,3 +21,3 @@ button.addEventListener('click', function() {
         button.parentNode.removeChild(button);
-        container.innerHTML += this.responseText;
+        containerDynamic.innerHTML += this.responseText;
       }
@@ -27,9 +32,20 @@ };
 
-  document.querySelectorAll('.custom .ellipsis').simpleTooltip({
-    shift: 'south',
-    title: 'Tooltip here is shown until all text is visible',
-    hideIf: function(element) {
-      return element.offsetWidth >= element.scrollWidth;
-    }
-  });
+  for (var i = 0; i < texts.length; i++) {
+    var div = document.createElement('div');
+    var span = document.createElement('span');
+
+    span.className = 'ellipsis';
+    span.textContent = texts[i];
+
+    div.appendChild(span);
+    containerCustom.appendChild(div);
+
+    span.simpleTooltip({
+      shift: 'south',
+      title: 'Tooltip here is shown until all text is visible',
+      hideIf: function(element) {
+        return element.offsetWidth >= element.scrollWidth;
+      }
+    });
+  }
 })();

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "homepage": "https://github.com/BR0kEN-/simpleTooltip",
@@ -12,3 +12,3 @@ "description": "CSS tooltips with position control via JS.",
     "type": "git",
-    "url": "git+https://github.com/BR0kEN-/simpleTooltip.git"
+    "url": "https://github.com/BR0kEN-/simpleTooltip.git"
   },
@@ -15,0 +15,0 @@ "bugs": {

simpleTooltip.js

@@ -30,2 +30,96 @@ /**
   /**
+   * @param {Element} hint
+   */
+  function setup(hint) {
+    var title = hint.getAttribute('title');
+    var hintStyle = window.getComputedStyle(hint);
+
+    // Allow to use the "title" as fallback.
+    if (title) {
+      hint.setAttribute(plugin.attrs.title, title);
+      hint.removeAttribute('title');
+    }
+
+    // Replace "static" positioning by "relative".
+    if (hintStyle.position.length < 7 && !/hidden/.test(hintStyle.overflow)) {
+      hint.style.position = 'relative';
+    }
+
+    // Set handlers for all elements having tooltips.
+    hint.addEventListener('mouseover', function() {
+      if (typeof this.simpleTooltipHideIf === 'function') {
+        if (this.simpleTooltipHideIf(this)) {
+          this.removeAttribute(plugin.attrs.shift);
+
+          return;
+        }
+        else {
+          this.setAttribute(plugin.attrs.shift, this.simpleTooltipShift);
+        }
+      }
+
+      // Copy content of the tooltip for width computation.
+      // Width should always gets recalculated because the value
+      // of the attribute might be modified.
+      containers.width.innerHTML = this.getAttribute(plugin.attrs.title);
+
+      // Remove an element from the list if its hint has an empty value.
+      if (!containers.width.innerHTML) {
+        this.removeAttribute(plugin.attrs.shift);
+
+        return;
+      }
+
+      var shift = this.getAttribute(plugin.attrs.shift);
+      /**
+       * The width of a current tooltip.
+       *
+       * @type {Number}
+       */
+      var width = containers.width.offsetWidth;
+      /**
+       * CSS rules for a current tooltip.
+       *
+       * @type {String}
+       */
+      var style = '';
+
+      // Limit the width.
+      if (width > plugin.maxWidth) {
+        width = plugin.maxWidth;
+        style = '[' + plugin.attrs.shift + ']:before{width:' + plugin.maxWidth + 'px;white-space:normal}';
+      }
+
+      // If not "south" or "north".
+      if (shift.length < 5) {
+        var elementOffsetLeft = this.offsetLeft || this.parentNode.offsetLeft;
+        var noPixelsAtRight = window.innerWidth - (elementOffsetLeft + this.offsetWidth + 20) < plugin.maxWidth;
+        var noPixelsAtLeft = elementOffsetLeft - 20 < plugin.maxWidth;
+
+        // Auto-positioning of the tooltip if it's wider than space to
+        // the end of the window.
+        if (noPixelsAtLeft || noPixelsAtRight) {
+          shift = shift.length < 3
+            // For "nw", "ne", "sw" and "se".
+            ? shift[0] + (noPixelsAtLeft ? 'w' : (noPixelsAtRight ? 'e' : ''))
+            // For "west" and "east".
+            : (noPixelsAtLeft ? 'west' : (noPixelsAtRight ? 'east' : ''));
+        }
+      }
+
+      // Calculate the offset if the tooltip should be aligned by the
+      // middle of the element.
+      if (shift.slice(-2) === 'th') {
+        style += '[' + plugin.attrs.shift + '$=th]:before{margin-left:-' + ((width + 10) / 2) + 'px}';
+      }
+
+      this.setAttribute(plugin.attrs.width, width);
+      this.setAttribute(plugin.attrs.shift, shift);
+
+      // Apply styles for a current tooltip.
+      containers.css.innerHTML = style;
+    }, false);
+  }
+
+  /**
    * @type {Object}
@@ -40,2 +134,10 @@ */
       title: 'data-title'
+    },
+    init: function () {
+      var hints = document.querySelectorAll('[' + plugin.attrs.shift + ']');
+      var i = hints.length;
+
+      while (--i >= 0) {
+        setup(hints[i]);
+      }
     }
@@ -65,112 +167,2 @@ };
 
-  /**
-   * Initialize or re-initialize the plugin.
-   */
-  plugin.init = function() {
-    /**
-     * The collection of elements with tooltips.
-     *
-     * @type {Object}
-     */
-    var hints = document.querySelectorAll('[' + plugin.attrs.shift + ']');
-    /**
-     * The total number of all tooltips.
-     *
-     * @type {Number}
-     */
-    var i = hints.length;
-
-    while (--i >= 0) {
-      var hint = hints[i];
-      var title = hint.getAttribute('title');
-      var hintStyle = window.getComputedStyle(hint);
-
-      // Allow to use the "title" as fallback.
-      if (title) {
-        hint.setAttribute(plugin.attrs.title, title);
-        hint.removeAttribute('title');
-      }
-
-      // Replace "static" positioning by "relative".
-      if (hintStyle.position.length < 7 && !/hidden/.test(hintStyle.overflow)) {
-        hint.style.position = 'relative';
-      }
-
-      // Set handlers for all elements having tooltips.
-      hint.addEventListener('mouseover', function() {
-        if (typeof this.simpleTooltipHideIf === 'function') {
-          if (this.simpleTooltipHideIf(this)) {
-            this.removeAttribute(plugin.attrs.shift);
-
-            return;
-          }
-          else {
-            this.setAttribute(plugin.attrs.shift, this.simpleTooltipShift);
-          }
-        }
-
-        // Copy content of the tooltip for width computation.
-        // Width should always gets recalculated because the value
-        // of the attribute might be modified.
-        containers.width.innerHTML = this.getAttribute(plugin.attrs.title);
-
-        // Remove an element from the list if its hint has an empty value.
-        if (!containers.width.innerHTML) {
-          this.removeAttribute(plugin.attrs.shift);
-
-          return;
-        }
-
-        var shift = this.getAttribute(plugin.attrs.shift);
-        /**
-         * The width of a current tooltip.
-         *
-         * @type {Number}
-         */
-        var width = containers.width.offsetWidth;
-        /**
-         * CSS rules for a current tooltip.
-         *
-         * @type {String}
-         */
-        var style = '';
-
-        // Limit the width.
-        if (width > plugin.maxWidth) {
-          width = plugin.maxWidth;
-          style = '[' + plugin.attrs.shift + ']:before{width:' + plugin.maxWidth + 'px;white-space:normal}';
-        }
-
-        // If not "south" or "north".
-        if (shift.length < 5) {
-          var elementOffsetLeft = this.offsetLeft || this.parentNode.offsetLeft;
-          var noPixelsAtRight = window.innerWidth - (elementOffsetLeft + this.offsetWidth + 20) < plugin.maxWidth;
-          var noPixelsAtLeft = elementOffsetLeft - 20 < plugin.maxWidth;
-
-          // Auto-positioning of the tooltip if it's wider than space to
-          // the end of the window.
-          if (noPixelsAtLeft || noPixelsAtRight) {
-            shift = shift.length < 3
-              // For "nw", "ne", "sw" and "se".
-              ? shift[0] + (noPixelsAtLeft ? 'w' : (noPixelsAtRight ? 'e' : ''))
-              // For "west" and "east".
-              : (noPixelsAtLeft ? 'west' : (noPixelsAtRight ? 'east' : ''));
-          }
-        }
-
-        // Calculate the offset if the tooltip should be aligned by the
-        // middle of the element.
-        if (shift.slice(-2) === 'th') {
-          style += '[' + plugin.attrs.shift + '$=th]:before{margin-left:-' + ((width + 10) / 2) + 'px}';
-        }
-
-        this.setAttribute(plugin.attrs.width, width);
-        this.setAttribute(plugin.attrs.shift, shift);
-
-        // Apply styles for a current tooltip.
-        containers.css.innerHTML = style;
-      }, false);
-    }
-  };
-
   // Create containers and initialize the tooltips.
@@ -224,2 +216,3 @@ window.addEventListener('DOMContentLoaded', function() {
           element.simpleTooltipShift = options.shift;
+          setup(element);
         }
@@ -226,0 +219,0 @@ }

No alert changes

Improved metrics

Lines of code

461

increased by1.32%

Worsened metrics

Total package byte prevSize

79258

decreased by-0.06%

No dependency changes