@idds/styles 1.0.60 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Shared CSS styles and colors for INA Digital Design System",
   "type": "module",
   "main": "./src/index.css",

package/src/components/tooltip.css

@@ -35,6 +35,8 @@
   opacity: 0;
   visibility: hidden;
   display: block;
+  /* Allow arrow to be visible outside content bounds */
+  overflow: visible;
 }
 
 /* Basic Tooltip Bubble */
@@ -215,20 +217,20 @@
 /* Positioning classes */
 /* Reduced margin to eliminate gap and prevent hover area break */
 .ina-tooltip--placement-top {
-  bottom: 100%;
+  bottom: 85%;
   left: 50%;
   transform: translateX(-50%);
   margin-bottom: 0;
 }
 
 .ina-tooltip--placement-top-start {
-  bottom: 100%;
+  bottom: 85%;
   left: 0;
   margin-bottom: 0;
 }
 
 .ina-tooltip--placement-top-end {
-  bottom: 100%;
+  bottom: 85%;
   right: 0;
   margin-bottom: 0;
 }
@@ -331,7 +333,7 @@
 
 /* Bottom arrows (pointing up to trigger) - arrow at top of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
-  bottom: 100%; /* At the top of tooltip content */
+  bottom: 85%; /* At the top of tooltip content */
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
@@ -339,7 +341,7 @@
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
-  bottom: 100%;
+  bottom: 85%;
   left: 16px;
   margin-left: -5px;
   border-width: 5px;
@@ -347,7 +349,7 @@
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
-  bottom: 100%;
+  bottom: 85%;
   right: 16px;
   margin-left: -5px;
   border-width: 5px;
@@ -357,7 +359,7 @@
 /* Left arrows (pointing right to trigger) - arrow at right edge of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
   top: 50%;
-  right: -5px; /* Positioned at right edge, pointing right */
+  right: -10px; /* Positioned at right edge, pointing right (5px border + 5px offset) */
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -365,7 +367,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
   top: 16px;
-  right: -5px;
+  right: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -373,7 +375,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
   bottom: 16px;
-  right: -5px;
+  right: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -382,7 +384,7 @@
 /* Right arrows (pointing left to trigger) - arrow at left edge of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
   top: 50%;
-  left: -5px; /* Positioned at left edge, pointing left */
+  left: -10px; /* Positioned at left edge, pointing left (5px border + 5px offset) */
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -390,7 +392,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
   top: 16px;
-  left: -5px;
+  left: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -398,7 +400,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
   bottom: 16px;
-  left: -5px;
+  left: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;