Merge pull request #15 from pepsico-ecommerce/arrow

Arrow

.tool-versions

@@ -1 +1 @@
-nodejs 14.17.6
+nodejs 16.17.0

README.md

@@ -37,7 +37,7 @@ Add the attribute `tooltip="tooltip text content"` to all the elements you want
 ```
 
 ## Applying custom styles
-In order o apply custom styling, add `data-tooltip-class` to the element you want to show a tooltip.
+In order to 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`
 
 ```
@@ -50,6 +50,20 @@ Then in corresponding CSS file add rules for `#pep-tooltips.custom-tooltip`
 }
 ```
 
+## Properties
+You can configure the tooltip with custom data attributes.
+
+* data-tooltip-class="custom-class"
+  * Adds `custom-class` to the tooltip container.
+* data-tooltip-arrow
+  * When set, enables the Arrow the points to the element.
+* data-tooltip-placement="auto"
+  * Sets the tooltip's placement. [offical docs](https://popper.js.org/docs/v2/constructors/#placement)
+* data-tooltip-offset-skidding
+  * [offical docs](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1)
+* data-tooltip-offset-distance
+  * [offical docs](https://popper.js.org/docs/v2/modifiers/offset/#distance-1)
+
 
 ## Install Other methods.
 

dist/index.babel.js

@@ -61,7 +61,7 @@
     },
 
     onMouseenter: function onMouseenter() {
-      var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4;
+      var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4, _el$dataset5;
 
       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
@@ -71,14 +71,22 @@
       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 useArrow = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipArrow) || false;
       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; // Apply custom class
+      this.elmTooltip.innerHTML = body; // if they want an arrow, append the div
+
+      if (useArrow) {
+        var elmArrow = document.createElement('div');
+        elmArrow.dataset.popperArrow = true;
+        this.elmTooltip.appendChild(elmArrow);
+      } // Apply custom class
+
 
       if (customClasses) {
         var _this$elmTooltip$clas;
@@ -100,10 +108,10 @@
       this.elmTooltip.style.display = 'inherit';
     },
     onMouseleave: function onMouseleave() {
-      var _el$dataset5;
+      var _el$dataset6;
 
       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.
+      var customClasses = ((_el$dataset6 = el.dataset) === null || _el$dataset6 === void 0 ? void 0 : _el$dataset6.tooltipClass) || null; // Reset the tooltip element so it can be re-used.
 
       this.elmTooltip.innerHTML = '';
       this.elmTooltip.style.display = 'none';

dist/styles.css

@@ -13,3 +13,37 @@
   padding: calc(var(--base-size)*2);
   z-index: 90001;
 }
+
+#pep-tooltips [data-popper-arrow],
+#pep-tooltips [data-popper-arrow]::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+#pep-tooltips [data-popper-arrow] {
+  visibility: hidden;
+}
+
+#pep-tooltips [data-popper-arrow]::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+#pep-tooltips[data-popper-placement^='top'] > [data-popper-arrow] {
+  bottom: -4px;
+}
+
+#pep-tooltips[data-popper-placement^='bottom'] > [data-popper-arrow] {
+  top: -4px;
+}
+
+#pep-tooltips[data-popper-placement^='left'] > [data-popper-arrow] {
+  right: -4px;
+}
+
+#pep-tooltips[data-popper-placement^='right'] > [data-popper-arrow] {
+  left: -4px;
+}

esm/index.js

@@ -26,6 +26,7 @@ define('[tooltip]', {
     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 useArrow = el.dataset?.tooltipArrow || false;
     const body = this.element.getAttribute('tooltip');
 
     // Skip if there is no tooltip text
@@ -34,6 +35,12 @@ define('[tooltip]', {
     }
     // Replace the content in the element with the text value from the attribute.
     this.elmTooltip.innerHTML = body;
+    // if they want an arrow, append the div
+    if (useArrow) {
+      const elmArrow = document.createElement('div');
+      elmArrow.dataset.popperArrow = true;
+      this.elmTooltip.appendChild(elmArrow);
+    }
     // Apply custom class
     if(customClasses) {
       this.elmTooltip.classList.add(...customClasses.split(' '))