react-tailwind-tooltip - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

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

 import React from 'react';
+type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 interface TooltipProps {
     children: React.ReactNode;
     title: React.ReactNode;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: TooltipPlacement;
     followCursor?: boolean;
@@ -7,0 +8,0 @@ arrow?: boolean;

dist/cjs/components/Tooltip/Tooltip.js

@@ -7,6 +7,20 @@ "use strict";
 var Portal_1 = require("../Portal");
+var getArrowClassName = function (placement) {
+    var baseClass = 'absolute w-2 h-2 transform rotate-45 to-50%';
+    var direction = placement.split('-')[0];
+    var positionClasses = {
+        top: 'bottom-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-br from-transparent from-50%',
+        bottom: 'top-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-tl from-transparent from-50%',
+        left: 'right-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-tr from-transparent from-50%',
+        right: 'left-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-bl from-transparent from-50%'
+    };
+    return "".concat(baseClass, " ").concat(positionClasses[direction]);
+};
 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, _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 _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];
@@ -27,3 +41,16 @@ var _m = react_1["default"].useState(false), isVisible = _m[0], setIsVisible = _m[1];
             var newPlacement = currentPlacement;
-            var placements = ['top', 'bottom', 'left', 'right'];
+            var placements = [
+                'top',
+                'top-start',
+                'top-end',
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'left',
+                'left-start',
+                'left-end',
+                'right',
+                'right-start',
+                'right-end',
+            ];
             var calculateTooltipPosition = function (placement) {
@@ -36,2 +63,12 @@ switch (placement) {
                         };
+                    case 'top-start':
+                        return {
+                            top: top_1 - tooltipHeight_1 - 8,
+                            left: left_1
+                        };
+                    case 'top-end':
+                        return {
+                            top: top_1 - tooltipHeight_1 - 8,
+                            left: left_1 + width_1 - tooltipWidth_1
+                        };
                     case 'bottom':
@@ -42,2 +79,12 @@ return {
                         };
+                    case 'bottom-start':
+                        return {
+                            top: top_1 + height_1 + 8,
+                            left: left_1
+                        };
+                    case 'bottom-end':
+                        return {
+                            top: top_1 + height_1 + 8,
+                            left: left_1 + width_1 - tooltipWidth_1
+                        };
                     case 'left':
@@ -48,2 +95,12 @@ return {
                         };
+                    case 'left-start':
+                        return {
+                            top: top_1,
+                            left: left_1 - tooltipWidth_1 - 8
+                        };
+                    case 'left-end':
+                        return {
+                            top: top_1 + height_1 - tooltipHeight_1,
+                            left: left_1 - tooltipWidth_1 - 8
+                        };
                     case 'right':
@@ -54,2 +111,12 @@ return {
                         };
+                    case 'right-start':
+                        return {
+                            top: top_1,
+                            left: left_1 + width_1 + 8
+                        };
+                    case 'right-end':
+                        return {
+                            top: top_1 + height_1 - tooltipHeight_1,
+                            left: left_1 + width_1 + 8
+                        };
                     default:
@@ -158,11 +225,5 @@ return {
                 title,
-                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%'
-                        : currentPlacement === 'bottom'
-                            ? 'top-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-tl from-transparent from-50%'
-                            : currentPlacement === 'left'
-                                ? 'right-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-tr from-transparent from-50%'
-                                : 'left-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-bl from-transparent from-50%'), style: { zIndex: -1 } })))))));
+                arrow && (react_1["default"].createElement("div", { className: "".concat(arrowStyle, " ").concat(getArrowClassName(currentPlacement)), style: { zIndex: -1 } })))))));
 };
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

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

 import React from 'react';
+type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 interface TooltipProps {
     children: React.ReactNode;
     title: React.ReactNode;
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: TooltipPlacement;
     followCursor?: boolean;
@@ -7,0 +8,0 @@ arrow?: boolean;

dist/esm/components/Tooltip/Tooltip.js

 import React from 'react';
 import { Portal } from '../Portal';
+var getArrowClassName = function (placement) {
+    var baseClass = 'absolute w-2 h-2 transform rotate-45 to-50%';
+    var direction = placement.split('-')[0];
+    var positionClasses = {
+        top: 'bottom-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-br from-transparent from-50%',
+        bottom: 'top-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-tl from-transparent from-50%',
+        left: 'right-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-tr from-transparent from-50%',
+        right: 'left-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-bl from-transparent from-50%'
+    };
+    return "".concat(baseClass, " ").concat(positionClasses[direction]);
+};
 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, _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 _k = React.useState({
+        top: 0,
+        left: 0
+    }), tooltipPosition = _k[0], setTooltipPosition = _k[1];
     var _l = React.useState(placement), currentPlacement = _l[0], setCurrentPlacement = _l[1];
@@ -22,3 +36,16 @@ var _m = React.useState(false), isVisible = _m[0], setIsVisible = _m[1];
             var newPlacement = currentPlacement;
-            var placements = ['top', 'bottom', 'left', 'right'];
+            var placements = [
+                'top',
+                'top-start',
+                'top-end',
+                'bottom',
+                'bottom-start',
+                'bottom-end',
+                'left',
+                'left-start',
+                'left-end',
+                'right',
+                'right-start',
+                'right-end',
+            ];
             var calculateTooltipPosition = function (placement) {
@@ -31,2 +58,12 @@ switch (placement) {
                         };
+                    case 'top-start':
+                        return {
+                            top: top_1 - tooltipHeight_1 - 8,
+                            left: left_1
+                        };
+                    case 'top-end':
+                        return {
+                            top: top_1 - tooltipHeight_1 - 8,
+                            left: left_1 + width_1 - tooltipWidth_1
+                        };
                     case 'bottom':
@@ -37,2 +74,12 @@ return {
                         };
+                    case 'bottom-start':
+                        return {
+                            top: top_1 + height_1 + 8,
+                            left: left_1
+                        };
+                    case 'bottom-end':
+                        return {
+                            top: top_1 + height_1 + 8,
+                            left: left_1 + width_1 - tooltipWidth_1
+                        };
                     case 'left':
@@ -43,2 +90,12 @@ return {
                         };
+                    case 'left-start':
+                        return {
+                            top: top_1,
+                            left: left_1 - tooltipWidth_1 - 8
+                        };
+                    case 'left-end':
+                        return {
+                            top: top_1 + height_1 - tooltipHeight_1,
+                            left: left_1 - tooltipWidth_1 - 8
+                        };
                     case 'right':
@@ -49,2 +106,12 @@ return {
                         };
+                    case 'right-start':
+                        return {
+                            top: top_1,
+                            left: left_1 + width_1 + 8
+                        };
+                    case 'right-end':
+                        return {
+                            top: top_1 + height_1 - tooltipHeight_1,
+                            left: left_1 + width_1 + 8
+                        };
                     default:
@@ -153,10 +220,4 @@ return {
                 title,
-                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%'
-                        : currentPlacement === 'bottom'
-                            ? 'top-[-4px] left-1/2 -translate-x-1/2 bg-gradient-to-tl from-transparent from-50%'
-                            : currentPlacement === 'left'
-                                ? 'right-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-tr from-transparent from-50%'
-                                : 'left-[-4px] top-1/2 -translate-y-1/2 bg-gradient-to-bl from-transparent from-50%'), style: { zIndex: -1 } })))))));
+                arrow && (React.createElement("div", { className: "".concat(arrowStyle, " ").concat(getArrowClassName(currentPlacement)), style: { zIndex: -1 } })))))));
 };
 //# sourceMappingURL=Tooltip.js.map

package.json

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

README.md

@@ -37,2 +37,8 @@ # React tailwind tooltip
 
+## Preview
+
+Open this example in [StackBlitz](https://stackblitz.com):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/Ramziij/react-tailwind-tooltip/tree/main/example?title=react-tailwind-tooltip-example&file=src/App.tsx)
+
 ## Example Usage:
@@ -45,3 +51,2 @@
 import { Tooltip } from 'react-tailwind-tooltip';
-import 'react-tailwind-tooltip/dist/index.css';
 
@@ -61,19 +66,58 @@ const App = () => {
 
-### Properties
+### Tailwind Configuration
 
-| Name            | Type                                                            | Description                                                          |
-| --------------- | --------------------------------------------------------------- | -------------------------------------------------------------------- |
-| `children`      | `React.ReactNode`                                               | The element that the tooltip will be attached to.                    |
-| `title`         | `React.ReactNode`                                               | The content of the tooltip.                                          |
-| `placement*`    | `top \| bottom \| left \| right`                                | TThe preferred position of the tooltip. Default `bottom`             |
-| `followCursor*` | `boolean`                                                       | Whether the tooltip should follow the cursor. Default `false`        |
-| `arrow*`        | `boolean`                                                       | Whether to display an arrow pointing to the element. Default `false` |
-| `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.                  |
-| `onClose*`      | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | Callback function triggered when the tooltip closes.                 |
+In your `tailwind.config.(js|ts)`:
 
+```tsx
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/react-tailwind-tooltip/**/*.{ts,tsx,js,jsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+### Monorepo Setup
+
+If you’re working in a monorepo with workspaces, you may need to use require.resolve to ensure Tailwind can see your content files:
+
+In `tailwind.config.(js|ts)`:
+
+```tsx
+const path = require('path');
+
+module.exports = {
+  content: [
+    './components/**/*.{html,js}',
+    './pages/**/*.{html,js}',
+    path.join(path.dirname(require.resolve('react-tailwind-tooltip')), '**/*.{ts,tsx,js,jsx}'),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+## Properties
+
+| Name            | Type                                                                                                                                         | Description                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `children`      | `React.ReactNode`                                                                                                                            | The element that the tooltip will be attached to.                    |
+| `title`         | `React.ReactNode`                                                                                                                            | The content of the tooltip.                                          |
+| `placement*`    | `top \| top-start \| top-end \| bottom \| bottom-start \| bottom-end \| left \| left-start \| left-end \| right \| right-start \| right-end` | TThe preferred position of the tooltip. Default `bottom`             |
+| `followCursor*` | `boolean`                                                                                                                                    | Whether the tooltip should follow the cursor. Default `false`        |
+| `arrow*`        | `boolean`                                                                                                                                    | Whether to display an arrow pointing to the element. Default `false` |
+| `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.                  |
+| `onClose*`      | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void`                                                                              | Callback function triggered when the tooltip closes.                 |
+
 Props marked with \* are not required.

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

62189

increased by16.63%

Lines of code

562

increased by28.31%

Number of lines in readme file

121

increased by57.14%

No dependency changes