Merge branch 'main' of github.com:pepsico-ecommerce/pep-tooltips

README.md

@@ -5,7 +5,7 @@ Turn the attribute "tooltip" into tooltips with this drop in script using custom
 ```
 <div tooltip="Dollars per hour">$9,001</div>
 
-<button tooltip="We won't spam you!">Submit<button>
+<button tooltip="We won't spam you!">Submit</button>
 ```
 
 
@@ -36,10 +36,35 @@ Add the attribute `tooltip="tooltip text content"` to all the elements you want
 <button tooltip="Complete The Pepsi Challenge">Submit<button>
 ```
 
+## Applying custom styles
+In order o apply custom styling, add `data-tooltip-class` to the element you want to show a tooltip.
+Then in corresponding CSS file add rules for `#pep-tooltips.custom-tooltip`
+
+```
+<div tooltip="Dollars per hour" data-tooltip-class="custom-styles-for-tooltip">$9,001</div>
+```
+
+```
+#pep-tooltips.custom-styles-for-tooltip {
+  width: 500px;
+}
+```
+
 
 ## Install Other methods.
 
 ```
 <link rel="stylesheet" href="dist/styles.css">
 <script src="dist/webpack.bundle.js"></script>
 ```
+
+
+## Running pep-tootips locally
+If you want to work with `pep-tooltips` locally and test out your changes, follow these steps
+1. Go to pep-tooltips folder and run `npm link` command
+2. Go to the app folder that uses `pep-tooltips`, e.g. `pepsico-admin`,
+and run `npm link pep-tooltips` command there
+3. Back in pep-tooltips folder run `make build` command.
+
+You now should be able to see your changes to `pep-tooltips`. Please note, you need to run step #3 and refresh the page of your host app after each change.
+

dist/index.babel.js

@@ -1,6 +1,39 @@
 (function () {
   'use strict';
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   var _require = require('wicked-elements'),
       define = _require.define;
 
@@ -28,23 +61,31 @@
     },
 
     onMouseenter: function onMouseenter() {
-      var _el$dataset, _el$dataset2, _el$dataset3;
+      var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4;
 
       var el = this.element;
       var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement
 
-      var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
+      var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
 
-      var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+      var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
 
+      var customClasses = ((_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4.tooltipClass) || null;
       var body = this.element.getAttribute('tooltip'); // Skip if there is no tooltip text
 
       if (body === '' || !body) {
         return;
       } // Replace the content in the element with the text value from the attribute.
 
 
-      this.elmTooltip.innerHTML = body; // Create a popper to manage the element's position.
+      this.elmTooltip.innerHTML = body; // Apply custom class
+
+      if (customClasses) {
+        var _this$elmTooltip$clas;
+
+        (_this$elmTooltip$clas = this.elmTooltip.classList).add.apply(_this$elmTooltip$clas, _toConsumableArray(customClasses.split(' ')));
+      } // Create a popper to manage the element's position.
+
 
       this.popper = createPopper(this.element, this.elmTooltip, {
         placement: placement,
@@ -59,9 +100,20 @@
       this.elmTooltip.style.display = 'inherit';
     },
     onMouseleave: function onMouseleave() {
-      // Reset the tooltip element so it can be re-used.
+      var _el$dataset5;
+
+      var el = this.element;
+      var customClasses = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipClass) || null; // Reset the tooltip element so it can be re-used.
+
       this.elmTooltip.innerHTML = '';
-      this.elmTooltip.style.display = 'none'; // remove the popper.
+      this.elmTooltip.style.display = 'none';
+
+      if (customClasses) {
+        var _this$elmTooltip$clas2;
+
+        (_this$elmTooltip$clas2 = this.elmTooltip.classList).remove.apply(_this$elmTooltip$clas2, _toConsumableArray(customClasses.split(' ')));
+      } // remove the popper.
+
 
       this.popper && this.popper.destroy();
     }

esm/index.js

@@ -23,8 +23,9 @@ define('[tooltip]', {
   onMouseenter() {
     const el = this.element;
     const placement = el.dataset?.tooltipPlacement || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement
-    const offsetSkidding = el.dataset?.tooltipOffsetSkidding || 0; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
-    const offsetDistance = el.dataset?.tooltipOffsetDistance || 0; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    const offsetSkidding = el.dataset?.tooltipOffsetSkidding || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
+    const offsetDistance = el.dataset?.tooltipOffsetDistance || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    const customClasses = el.dataset?.tooltipClass || null;
     const body = this.element.getAttribute('tooltip');
 
     // Skip if there is no tooltip text
@@ -33,6 +34,10 @@ define('[tooltip]', {
     }
     // Replace the content in the element with the text value from the attribute.
     this.elmTooltip.innerHTML = body;
+    // Apply custom class
+    if(customClasses) {
+      this.elmTooltip.classList.add(...customClasses.split(' ')) 
+    }
 
     // Create a popper to manage the element's position.
     this.popper = createPopper(this.element, this.elmTooltip, {
@@ -51,9 +56,14 @@ define('[tooltip]', {
     this.elmTooltip.style.display = 'inherit';
   },
   onMouseleave() {
+    const el = this.element;
+    const customClasses = el.dataset?.tooltipClass || null;
     // Reset the tooltip element so it can be re-used.
     this.elmTooltip.innerHTML = '';
     this.elmTooltip.style.display = 'none';
+    if(customClasses) {
+      this.elmTooltip.classList.remove(...customClasses.split(' '))
+    }
     // remove the popper.
     this.popper && this.popper.destroy();
   },