react-tooltip-lite - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

package.json

 {
   "name": "react-tooltip-lite",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "React tooltip, focused on simplicity and performance",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.jsx

@@ -88,6 +88,4 @@ import React, { PropTypes } from 'react';
                 </span>
+                <span className={`react-tooltip-lite-arrow react-tooltip-lite-${currentPositions.realDirection}-arrow`} style={arrowStyles} />
             </Portal>
-
-            <span className={`react-tooltip-lite-arrow react-tooltip-lite-${currentPositions.realDirection}-arrow`} style={arrowStyles} />
-
         </this.props.tagName>
@@ -94,0 +92,0 @@ );

src/position.js

@@ -29,6 +29,5 @@ /**
 function getTipMaxWidth() {
-  return document.documentElement.clientWidth - (bodyPadding * 2);
+  return (typeof document !== 'undefined') ? document.documentElement.clientWidth - (bodyPadding * 2) : 1000;
 }
 
-
 /**
@@ -114,23 +113,26 @@ * Gets wrapper's left position for top/bottom tooltips as well as needed width restriction
 /**
- * Returns the positions style rules
+ * sets the Arrow styles based on direction
  */
-export default function positions(direction, tip, target, state, props) {
-  const realDirection = getDirection(direction, tip, target, distance, bodyPadding);
-  const maxWidth = getTipMaxWidth();
+function getArrowStyles(target, tip, direction, state, props) {
+  if (!target) {
+    return {
+      top: '0',
+      left: '-10000000px',
+    };
+  }
 
-  switch (realDirection) {
+  const targetRect = target.getBoundingClientRect();
+  const halfTargetHeight = Math.round(target.offsetHeight / 2);
+  const halfTargetWidth = Math.round(target.offsetWidth / 2);
+  const scrollTop = getScrollTop();
+  const scrollLeft = getScrollLeft();
+
+  switch (direction) {
     case 'right':
       return {
-        tip: {
-          ...getLeftRightPosition(tip, target, state, 'right'),
-          maxWidth,
-        },
-        arrow: {
-          top: (state.showTip && tip) ? 'calc(50% - 10px)' : '-10000000px',
-          right: '-11px',
-          borderRight: (props.background !== '') ? `10px solid ${props.background}` : '',
-          borderTop: '10px solid transparent',
-          borderBottom: '10px solid transparent',
-        },
-        realDirection,
+        top: (state.showTip && tip) ? (targetRect.top + scrollTop + halfTargetHeight) - arrowSize : '-10000000px',
+        left: targetRect.right + scrollLeft,
+        borderRight: (props.background !== '') ? `10px solid ${props.background}` : '',
+        borderTop: '10px solid transparent',
+        borderBottom: '10px solid transparent',
       };
@@ -140,31 +142,16 @@
       return {
-        tip: {
-          ...getLeftRightPosition(tip, target, state, 'left'),
-          maxWidth,
-        },
-        arrow: {
-          top: (state.showTip && tip) ? 'calc(50% - 10px)' : '-10000000px',
-          left: '-12px',
-          borderLeft: (props.background !== '') ? `10px solid ${props.background}` : '',
-          borderTop: '10px solid transparent',
-          borderBottom: '10px solid transparent',
-        },
-        realDirection,
+        top: (state.showTip && tip) ? (targetRect.top + scrollTop + halfTargetHeight) - arrowSize : '-10000000px',
+        left: (targetRect.left + scrollLeft) - distance - 1,
+        borderLeft: (props.background !== '') ? `10px solid ${props.background}` : '',
+        borderTop: '10px solid transparent',
+        borderBottom: '10px solid transparent',
       };
 
     case 'up':
-
       return {
-        tip: {
-          ...getUpDownPosition(tip, target, state, 'up'),
-          maxWidth,
-        },
-        arrow: {
-          left: (state.showTip && tip) ? 'calc(50% - 10px)' : '-10000000px',
-          top: '-11px',
-          borderTop: (props.background !== '') ? `10px solid ${props.background}` : '',
-          borderLeft: '10px solid transparent',
-          borderRight: '10px solid transparent',
-        },
-        realDirection,
+        left: (state.showTip && tip) ? (targetRect.left + scrollLeft + halfTargetWidth) - arrowSize : '-10000000px',
+        top: (targetRect.top + scrollTop) - distance,
+        borderTop: (props.background !== '') ? `10px solid ${props.background}` : '',
+        borderLeft: '10px solid transparent',
+        borderRight: '10px solid transparent',
       };
@@ -174,18 +161,31 @@
     default:
-
       return {
-        tip: {
-          ...getUpDownPosition(tip, target, state, 'down'),
-          maxWidth,
-        },
-        arrow: {
-          left: (state.showTip && tip) ? 'calc(50% - 10px)' : '-10000000px',
-          bottom: '-11px',
-          borderBottom: (props.background !== '') ? `10px solid ${props.background}` : '',
-          borderLeft: '10px solid transparent',
-          borderRight: '10px solid transparent',
-        },
-        realDirection,
+        left: (state.showTip && tip) ? (targetRect.left + scrollLeft + halfTargetWidth) - arrowSize : '-10000000px',
+        top: targetRect.bottom + scrollTop,
+        borderBottom: (props.background !== '') ? `10px solid ${props.background}` : '',
+        borderLeft: '10px solid transparent',
+        borderRight: '10px solid transparent',
       };
   }
 }
+
+/**
+ * Returns the positions style rules
+ */
+export default function positions(direction, tip, target, state, props) {
+  const realDirection = getDirection(direction, tip, target, distance, bodyPadding);
+  const maxWidth = getTipMaxWidth();
+
+  const tipPosition = (realDirection === 'up' || realDirection === 'down')
+    ? getUpDownPosition(tip, target, state, realDirection)
+    : getLeftRightPosition(tip, target, state, realDirection);
+
+  return {
+    tip: {
+      ...tipPosition,
+      maxWidth,
+    },
+    arrow: getArrowStyles(target, tip, realDirection, state, props),
+    realDirection,
+  };
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1662481

increased by0.03%

Worsened metrics

Lines of code

19861

decreased by-0.01%

No dependency changes