react-tailwind-tooltip - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/cjs/components/Tooltip/Tooltip.d.ts

@@ -9,6 +9,10 @@ import React from 'react';
     open?: boolean;
+    tooltipStyle?: string;
+    arrowStyle?: string;
     onOpen?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    enterDelay?: number;
+    leaveDelay?: number;
 }
 export declare const Tooltip: React.FC<TooltipProps>;
 export {};

dist/cjs/components/Tooltip/Tooltip.js

@@ -8,9 +8,12 @@ "use strict";
 var Tooltip = function (_a) {
-    var children = _a.children, title = _a.title, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.followCursor, followCursor = _c === void 0 ? false : _c, _d = _a.arrow, arrow = _d === void 0 ? false : _d, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
-    var _e = react_1["default"].useState(openProp ? openProp : false), open = _e[0], setOpen = _e[1];
-    var _f = react_1["default"].useState({ top: 0, left: 0 }), tooltipPosition = _f[0], setTooltipPosition = _f[1];
-    var _g = react_1["default"].useState(placement), currentPlacement = _g[0], setCurrentPlacement = _g[1];
+    var children = _a.children, title = _a.title, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.followCursor, followCursor = _c === void 0 ? false : _c, _d = _a.arrow, arrow = _d === void 0 ? false : _d, openProp = _a.open, _e = _a.tooltipStyle, tooltipStyle = _e === void 0 ? 'bg-[#223354]/95 text-white text-sm' : _e, _f = _a.arrowStyle, arrowStyle = _f === void 0 ? 'to-[#223354]/95' : _f, onOpen = _a.onOpen, onClose = _a.onClose, _g = _a.enterDelay, enterDelay = _g === void 0 ? 100 : _g, _h = _a.leaveDelay, leaveDelay = _h === void 0 ? 100 : _h;
+    var _j = react_1["default"].useState(openProp ? openProp : false), open = _j[0], setOpen = _j[1];
+    var _k = react_1["default"].useState({ top: 0, left: 0 }), tooltipPosition = _k[0], setTooltipPosition = _k[1];
+    var _l = react_1["default"].useState(placement), currentPlacement = _l[0], setCurrentPlacement = _l[1];
+    var _m = react_1["default"].useState(false), isVisible = _m[0], setIsVisible = _m[1];
     var tooltipRef = react_1["default"].useRef(null);
     var childRef = react_1["default"].useRef(null);
     var isTooltipHovered = react_1["default"].useRef(false);
+    var openTimeout = react_1["default"].useRef(null);
+    var closeTimeout = react_1["default"].useRef(null);
     var calculatePosition = function () {
@@ -75,16 +78,34 @@ if (childRef.current && tooltipRef.current) {
     var handleMouseOver = function (event) {
-        setOpen(true);
-        if (onOpen)
-            onOpen(event);
+        if (openTimeout.current) {
+            clearTimeout(openTimeout.current);
+        }
+        openTimeout.current = setTimeout(function () {
+            setOpen(true);
+            setIsVisible(true);
+            if (onOpen)
+                onOpen(event);
+        }, enterDelay);
     };
     var handleMouseLeave = function (event) {
-        setTimeout(function () {
+        if (openTimeout.current) {
+            clearTimeout(openTimeout.current);
+        }
+        if (closeTimeout.current) {
+            clearTimeout(closeTimeout.current);
+        }
+        closeTimeout.current = setTimeout(function () {
             if (!isTooltipHovered.current) {
-                setOpen(false);
-                if (onClose)
-                    onClose(event);
+                setIsVisible(false);
+                setTimeout(function () {
+                    setOpen(false);
+                    if (onClose)
+                        onClose(event);
+                }, 300);
             }
-        }, 100);
+        }, leaveDelay);
     };
     var handleTooltipMouseEnter = function () {
+        if (closeTimeout.current) {
+            clearTimeout(closeTimeout.current);
+        }
         isTooltipHovered.current = true;
@@ -94,5 +115,10 @@ };
         isTooltipHovered.current = false;
-        setOpen(false);
-        if (onClose)
-            onClose(event);
+        closeTimeout.current = setTimeout(function () {
+            setIsVisible(false);
+            setTimeout(function () {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }, 300);
+        }, leaveDelay);
     };
@@ -121,5 +147,11 @@ react_1["default"].useEffect(function () {
         open && (react_1["default"].createElement(Portal_1.Portal, null,
-            react_1["default"].createElement("div", { className: "fixed z-10 p-2 bg-[#223354]/95 text-white text-sm rounded-lg shadow-lg", style: { top: "".concat(tooltipPosition.top, "px"), left: "".concat(tooltipPosition.left, "px") }, ref: tooltipRef, onMouseEnter: handleTooltipMouseEnter, onMouseLeave: handleTooltipMouseLeave },
+            react_1["default"].createElement("div", { className: "fixed z-10 p-2 ".concat(tooltipStyle, " rounded-lg shadow-lg"), style: {
+                    top: "".concat(tooltipPosition.top, "px"),
+                    left: "".concat(tooltipPosition.left, "px"),
+                    transition: 'opacity 0.3s ease, transform 0.3s ease',
+                    opacity: isVisible ? 1 : 0,
+                    transform: isVisible ? 'scale(1)' : 'scale(0.95)'
+                }, ref: tooltipRef, onMouseEnter: handleTooltipMouseEnter, onMouseLeave: handleTooltipMouseLeave },
                 title,
-                arrow && (react_1["default"].createElement("div", { className: "absolute w-2 h-2 to-[#223354]/95 to-50% transform rotate-45 ".concat(currentPlacement === 'top'
+                arrow && (react_1["default"].createElement("div", { className: "absolute w-2 h-2 ".concat(arrowStyle, " to-50% transform rotate-45 ").concat(currentPlacement === 'top'
                         ? 'bottom-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-br from-transparent from-50%'
@@ -126,0 +158,0 @@ : currentPlacement === 'bottom'

dist/esm/components/Tooltip/Tooltip.d.ts

@@ -9,6 +9,10 @@ import React from 'react';
     open?: boolean;
+    tooltipStyle?: string;
+    arrowStyle?: string;
     onOpen?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    enterDelay?: number;
+    leaveDelay?: number;
 }
 export declare const Tooltip: React.FC<TooltipProps>;
 export {};

dist/esm/components/Tooltip/Tooltip.js

 import React from 'react';
 import { Portal } from '../Portal';
 export var Tooltip = function (_a) {
-    var children = _a.children, title = _a.title, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.followCursor, followCursor = _c === void 0 ? false : _c, _d = _a.arrow, arrow = _d === void 0 ? false : _d, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
-    var _e = React.useState(openProp ? openProp : false), open = _e[0], setOpen = _e[1];
-    var _f = React.useState({ top: 0, left: 0 }), tooltipPosition = _f[0], setTooltipPosition = _f[1];
-    var _g = React.useState(placement), currentPlacement = _g[0], setCurrentPlacement = _g[1];
+    var children = _a.children, title = _a.title, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.followCursor, followCursor = _c === void 0 ? false : _c, _d = _a.arrow, arrow = _d === void 0 ? false : _d, openProp = _a.open, _e = _a.tooltipStyle, tooltipStyle = _e === void 0 ? 'bg-[#223354]/95 text-white text-sm' : _e, _f = _a.arrowStyle, arrowStyle = _f === void 0 ? 'to-[#223354]/95' : _f, onOpen = _a.onOpen, onClose = _a.onClose, _g = _a.enterDelay, enterDelay = _g === void 0 ? 100 : _g, _h = _a.leaveDelay, leaveDelay = _h === void 0 ? 100 : _h;
+    var _j = React.useState(openProp ? openProp : false), open = _j[0], setOpen = _j[1];
+    var _k = React.useState({ top: 0, left: 0 }), tooltipPosition = _k[0], setTooltipPosition = _k[1];
+    var _l = React.useState(placement), currentPlacement = _l[0], setCurrentPlacement = _l[1];
+    var _m = React.useState(false), isVisible = _m[0], setIsVisible = _m[1];
     var tooltipRef = React.useRef(null);
     var childRef = React.useRef(null);
     var isTooltipHovered = React.useRef(false);
+    var openTimeout = React.useRef(null);
+    var closeTimeout = React.useRef(null);
     var calculatePosition = function () {
@@ -70,16 +73,34 @@ if (childRef.current && tooltipRef.current) {
     var handleMouseOver = function (event) {
-        setOpen(true);
-        if (onOpen)
-            onOpen(event);
+        if (openTimeout.current) {
+            clearTimeout(openTimeout.current);
+        }
+        openTimeout.current = setTimeout(function () {
+            setOpen(true);
+            setIsVisible(true);
+            if (onOpen)
+                onOpen(event);
+        }, enterDelay);
     };
     var handleMouseLeave = function (event) {
-        setTimeout(function () {
+        if (openTimeout.current) {
+            clearTimeout(openTimeout.current);
+        }
+        if (closeTimeout.current) {
+            clearTimeout(closeTimeout.current);
+        }
+        closeTimeout.current = setTimeout(function () {
             if (!isTooltipHovered.current) {
-                setOpen(false);
-                if (onClose)
-                    onClose(event);
+                setIsVisible(false);
+                setTimeout(function () {
+                    setOpen(false);
+                    if (onClose)
+                        onClose(event);
+                }, 300);
             }
-        }, 100);
+        }, leaveDelay);
     };
     var handleTooltipMouseEnter = function () {
+        if (closeTimeout.current) {
+            clearTimeout(closeTimeout.current);
+        }
         isTooltipHovered.current = true;
@@ -89,5 +110,10 @@ };
         isTooltipHovered.current = false;
-        setOpen(false);
-        if (onClose)
-            onClose(event);
+        closeTimeout.current = setTimeout(function () {
+            setIsVisible(false);
+            setTimeout(function () {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }, 300);
+        }, leaveDelay);
     };
@@ -116,5 +142,11 @@ React.useEffect(function () {
         open && (React.createElement(Portal, null,
-            React.createElement("div", { className: "fixed z-10 p-2 bg-[#223354]/95 text-white text-sm rounded-lg shadow-lg", style: { top: "".concat(tooltipPosition.top, "px"), left: "".concat(tooltipPosition.left, "px") }, ref: tooltipRef, onMouseEnter: handleTooltipMouseEnter, onMouseLeave: handleTooltipMouseLeave },
+            React.createElement("div", { className: "fixed z-10 p-2 ".concat(tooltipStyle, " rounded-lg shadow-lg"), style: {
+                    top: "".concat(tooltipPosition.top, "px"),
+                    left: "".concat(tooltipPosition.left, "px"),
+                    transition: 'opacity 0.3s ease, transform 0.3s ease',
+                    opacity: isVisible ? 1 : 0,
+                    transform: isVisible ? 'scale(1)' : 'scale(0.95)'
+                }, ref: tooltipRef, onMouseEnter: handleTooltipMouseEnter, onMouseLeave: handleTooltipMouseLeave },
                 title,
-                arrow && (React.createElement("div", { className: "absolute w-2 h-2 to-[#223354]/95 to-50% transform rotate-45 ".concat(currentPlacement === 'top'
+                arrow && (React.createElement("div", { className: "absolute w-2 h-2 ".concat(arrowStyle, " to-50% transform rotate-45 ").concat(currentPlacement === 'top'
                         ? 'bottom-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-br from-transparent from-50%'
@@ -121,0 +153,0 @@ : currentPlacement === 'bottom'

package.json

 {
   "name": "react-tailwind-tooltip",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "repository": {
@@ -44,2 +44,3 @@ "type": "git",
     "@types/react-dom": "^18.3.0",
+    "@types/node": "^16.18.101",
     "autoprefixer": "^9.8.6",
@@ -46,0 +47,0 @@ "daisyui": "^4.12.10",

README.md

@@ -44,2 +44,3 @@ # React tailwind tooltip
 import { Tooltip } from 'react-tailwind-tooltip';
+import 'react-tailwind-tooltip/dist/index.css';
 
@@ -59,4 +60,2 @@ const App = () => {
 
-You can also insert styles - `import 'react-tailwind-tooltip/dist/index.css'`
-
 ### Properties
@@ -72,2 +71,6 @@
 | `open*`         | `boolean`                                                       | Control the visibility of the tooltip.                               |
+| `tooltipStyle*` | `string`                                                        | Style of the tooltip. Default `bg-[#223354]/95 text-white text-sm`   |
+| `arrowStyle*`   | `string`                                                        | Style of the arrow. Default `to-[#223354]/95`                        |
+| `enterDelay*`   | `number`                                                        | Delay in milliseconds before the tooltip appears. Default `100`      |
+| `leaveDelay*`   | `number`                                                        | Delay in milliseconds before the tooltip disappears. Default `100`   |
 | `onOpen*`       | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | Callback function triggered when the tooltip opens.                  |
@@ -74,0 +77,0 @@ | `onClose*`      | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | Callback function triggered when the tooltip closes.                 |

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

53323

increased by14.89%

Lines of code

438

increased by19.67%

Number of lines in readme file

77

increased by4.05%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes