react-tailwind-tooltip - npm Package Compare versions

Comparing version 1.0.0 to 1.0.2

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

 import React from 'react';
 interface TooltipProps {
     children: React.ReactNode;
-    title: string;
+    title: React.ReactNode;
     placement?: 'top' | 'bottom' | 'left' | 'right';
@@ -6,0 +6,0 @@ followCursor?: boolean;

dist/cjs/components/Tooltip/Tooltip.js

@@ -14,2 +14,3 @@ "use strict";
     var childRef = react_1["default"].useRef(null);
+    var isTooltipHovered = react_1["default"].useRef(false);
     var calculatePosition = function () {
@@ -79,2 +80,15 @@ if (childRef.current && tooltipRef.current) {
     var handleMouseLeave = function (event) {
+        setTimeout(function () {
+            if (!isTooltipHovered.current) {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }
+        }, 100);
+    };
+    var handleTooltipMouseEnter = function () {
+        isTooltipHovered.current = true;
+    };
+    var handleTooltipMouseLeave = function (event) {
+        isTooltipHovered.current = false;
         setOpen(false);
@@ -106,3 +120,3 @@ if (onClose)
         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 },
+            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 },
                 title,
@@ -109,0 +123,0 @@ arrow && (react_1["default"].createElement("div", { className: "absolute w-2 h-2 to-[#223354]/95 to-50% transform rotate-45 ".concat(currentPlacement === 'top'

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

 import React from 'react';
 interface TooltipProps {
     children: React.ReactNode;
-    title: string;
+    title: React.ReactNode;
     placement?: 'top' | 'bottom' | 'left' | 'right';
@@ -6,0 +6,0 @@ followCursor?: boolean;

dist/esm/components/Tooltip/Tooltip.js

@@ -10,2 +10,3 @@ import React from 'react';
     var childRef = React.useRef(null);
+    var isTooltipHovered = React.useRef(false);
     var calculatePosition = function () {
@@ -75,2 +76,15 @@ if (childRef.current && tooltipRef.current) {
     var handleMouseLeave = function (event) {
+        setTimeout(function () {
+            if (!isTooltipHovered.current) {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }
+        }, 100);
+    };
+    var handleTooltipMouseEnter = function () {
+        isTooltipHovered.current = true;
+    };
+    var handleTooltipMouseLeave = function (event) {
+        isTooltipHovered.current = false;
         setOpen(false);
@@ -102,3 +116,3 @@ if (onClose)
         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 },
+            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 },
                 title,
@@ -105,0 +119,0 @@ arrow && (React.createElement("div", { className: "absolute w-2 h-2 to-[#223354]/95 to-50% transform rotate-45 ".concat(currentPlacement === 'top'

package.json

 {
   "name": "react-tailwind-tooltip",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

@@ -15,2 +15,4 @@ # React tailwind tooltip
 
+[![NPM](https://nodei.co/npm/react-tailwind-tooltip.png?downloads=true&stars=true)](https://www.npmjs.com/package/react-tailwind-tooltip)
+
 Install with npm:
@@ -38,2 +40,4 @@
 
+![Example](./images/example.png)
+
 ```tsx
@@ -40,0 +44,0 @@ import React from 'react';

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

46413

increased by4.82%

Lines of code

366

increased by8.93%

Number of lines in readme file

74

increased by5.71%

No dependency changes