@antscorp/antsomi-ui 2.0.96 → 2.0.97

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -893,21 +893,30 @@ const TagifyInput = forwardRef((props, ref) => {
             style.type = 'text/css';
             style.appendChild(document.createTextNode(`
           .tagify__tooltip {
-              display: none;
-              position: fixed;
-              background-color: #595959;
-              border-radius: 10px;
-              color: #ffffff;
-              padding: 5px;
-              z-index: 10000
+            display: none;
+            position: fixed;
+            background-color: #595959;
+            border-radius: 10px;
+            color: #ffffff;
+            padding: 6px;
+            z-index: 10000;
+            max-width: 280px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
           }
+
           .tagify__tooltip_content {
             width: 100%;
-            height: 100%;
+            max-width: 250px;
+            height: auto;
             position: relative;
             transition: 0s;
             font-size: 12px;
+            line-height: 16px;
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
           }
+
           .tagify__tooltip_content:before {
             content: '';
             position: absolute;
@@ -933,30 +942,60 @@ const TagifyInput = forwardRef((props, ref) => {
     }, []);
     useDeepCompareEffect(() => {
         const showTooltip = (tagElement) => {
+            const isTagReadonly = tagifyRef.current?.settings.readonly;
+            const tagType = tagElement.getAttribute('type');
+            // If tag is readonly and tag type is hint for link, do not show the tooltip
+            if (isTagReadonly && tagType === DETECT_LINK)
+                return;
             const tagRect = tagElement.getBoundingClientRect();
-            const removeTag = tagElement.getAttribute(REMOVED_TAG);
-            const noViewTag = tagElement.getAttribute(NO_VIEW_TAG);
-            const invalidTag = tagElement.getAttribute(INVALID_TAG);
             const messageTag = tagElement.getAttribute(MESSAGE_TAG);
-            const forceShowTooltipAttr = tagElement.getAttribute(FORCE_SHOW_TOOLTIP);
+            const tagText = tagElement.querySelector('.tagify__tag-text');
+            // Determine what content to show in tooltip
+            let tooltipMessage = '';
             if (messageTag) {
-                const tooltipContent = document.querySelector('.tagify__tooltip_content');
-                if (tooltipContent) {
-                    tooltipContent.innerHTML = messageTag;
-                }
+                tooltipMessage = messageTag;
+            }
+            else if (tagText) {
+                tooltipMessage = tagText.textContent || '';
+            }
+            // Update tooltip content first
+            const tooltipContent = document.querySelector('.tagify__tooltip_content');
+            if (tooltipContent && tooltipMessage) {
+                tooltipContent.innerHTML = tooltipMessage;
             }
             const tooltip = document.querySelector('.tagify__tooltip');
-            tooltip?.setAttribute('style', 'display: block !important;visibility: hidden !important;');
+            // Show tooltip temporarily to measure its dimensions after content is set
+            tooltip?.setAttribute('style', 'display: block !important; visibility: hidden !important; position: fixed; top: -9999px; left: -9999px;');
+            // Get the actual dimensions after content is applied
             const tooltipRect = tooltip?.getBoundingClientRect();
-            const hasWrongAttribute = removeTag === 'true' || noViewTag === 'true' || invalidTag === 'true';
-            const isTooltipVisible = tooltipRect && hasWrongAttribute;
-            const isForceVisible = tooltipRect && forceShowTooltipAttr === 'true';
-            if (isTooltipVisible || isForceVisible) {
+            const shouldShowTooltip = tooltipRect && tooltipMessage !== '';
+            if (shouldShowTooltip) {
+                // Calculate dynamic offset based on actual tooltip height plus some padding
+                const tooltipHeight = tooltipRect.height;
+                const offsetTop = tooltipHeight + 8; // 8px padding between tooltip and tag
+                const top = tagRect.y - offsetTop;
+                // Handle horizontal positioning
                 if (tooltipRect?.width > tagRect.width) {
-                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${tagRect.y - tagRect.height - 10}px;left:${tagRect.x - (tooltipRect?.width - tagRect.width) / 2}px;`);
+                    const left = tagRect.x - (tooltipRect.width - tagRect.width) / 2;
+                    // Ensure tooltip doesn't go off-screen horizontally
+                    const viewportWidth = window.innerWidth;
+                    const adjustedLeft = Math.max(0, Math.min(left, viewportWidth - tooltipRect.width));
+                    tooltip?.setAttribute('style', `visibility: visible !important; display: block !important; top: ${top}px; left: ${adjustedLeft}px; position: fixed;`);
                 }
                 else {
-                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${tagRect.y - tagRect.height - 10}px;left:${tagRect.x + (tagRect?.width - tooltipRect.width) / 2}px;`);
+                    const left = tagRect.x + (tagRect.width - tooltipRect.width) / 2;
+                    // Ensure tooltip doesn't go off-screen horizontally
+                    const viewportWidth = window.innerWidth;
+                    const adjustedLeft = Math.max(0, Math.min(left, viewportWidth - tooltipRect.width));
+                    tooltip?.setAttribute('style', `visibility: visible !important; display: block !important; top: ${top}px; left: ${adjustedLeft}px; position: fixed;`);
+                }
+                // Handle case where tooltip would appear above viewport
+                if (top < 0) {
+                    // Position tooltip below the tag instead
+                    const bottomTop = tagRect.bottom + 10;
+                    const currentStyle = tooltip?.getAttribute('style') || '';
+                    const updatedStyle = currentStyle.replace(/top:\s*[^;]+/, `top: ${bottomTop}px`);
+                    tooltip?.setAttribute('style', updatedStyle);
                 }
             }
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.96",
+  "version": "2.0.97",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",