@idds/styles 1.0.39 → 1.0.40

package/package.json

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

package/src/components/tooltip.css

@@ -10,6 +10,13 @@
   display: inline-block;
 }
 
+/* Support force :hover state in developer tools */
+.ina-tooltip:hover .ina-tooltip__content,
+.ina-tooltip[data-hover='true'] .ina-tooltip__content {
+  opacity: 1;
+  visibility: visible;
+}
+
 .ina-tooltip__trigger {
   display: inline-block;
 }
@@ -17,12 +24,15 @@
 /* Tooltip content container */
 .ina-tooltip__content {
   position: absolute;
-  z-index: 999999;
+  z-index: 999999 !important;
   /* Ensure tooltip is always on top of everything */
   pointer-events: none;
   /* Prevent clipping by any parent container */
   transform: translateZ(0);
   will-change: transform;
+  /* Hidden by default, shown via JavaScript or :hover */
+  opacity: 0;
+  visibility: hidden;
 }
 
 /* Basic Tooltip Bubble */
@@ -198,14 +208,7 @@
   flex-shrink: 0;
 }
 
-/* Tooltip arrow using pseudo element ::after */
-.ina-tooltip__content::after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
+/* Arrow removed from here - now on .ina-tooltip__content--show-arrow::after */
 
 /* Positioning classes */
 /* Reduced margin to eliminate gap and prevent hover area break */
@@ -285,155 +288,229 @@
   margin-left: 0;
 }
 
-/* Arrow positioning using ::after pseudo element */
-/* Using smaller border size (4px) for sharper/lancip arrow */
-/* Arrow positioned at edge of content to eliminate gap */
-/* Top arrows (pointing down) */
+/* Arrow positioning using ::after pseudo element on content */
+/* Following W3Schools approach with sharper/lancip arrow */
+/* Using 5px border-width for sharper arrow like W3Schools */
+/* Base arrow styles - only show when tooltip is visible */
+.ina-tooltip__content--show-arrow::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  border-style: solid;
+}
+
+/* Top arrows (pointing down to trigger) - arrow at bottom of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-top::after {
+  top: 100%; /* At the bottom of tooltip content */
   left: 50%;
-  transform: translateX(-50%);
-  bottom: -4px; /* Positioned at edge, overlapping trigger slightly */
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid;
-  /* Color will inherit from parent bubble/card background */
+  margin-left: -5px; /* Half of border-width to center */
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
+  /* Color will be set by variant classes below */
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-start::after {
+  top: 100%;
   left: 16px;
-  bottom: -4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-end::after {
+  top: 100%;
   right: 16px;
-  bottom: -4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
-/* Bottom arrows (pointing up) */
+/* 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 */
   left: 50%;
-  transform: translateX(-50%);
-  top: -4px; /* Positioned at edge, overlapping trigger slightly */
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
+  bottom: 100%;
   left: 16px;
-  top: -4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
+  bottom: 100%;
   right: 16px;
-  top: -4px;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-bottom: 4px solid;
+  margin-left: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
-/* Left arrows (pointing right) */
+/* Left arrows (pointing right to trigger) - arrow at right of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
   top: 50%;
-  transform: translateY(-50%);
-  right: -4px; /* Positioned at edge, overlapping trigger slightly */
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 4px solid;
+  right: 100%; /* To the left of tooltip content */
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
   top: 16px;
-  right: -4px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 4px solid;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
   bottom: 16px;
-  right: -4px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 4px solid;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
-/* Right arrows (pointing left) */
+/* Right arrows (pointing left to trigger) - arrow at left of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
   top: 50%;
-  transform: translateY(-50%);
-  left: -4px; /* Positioned at edge, overlapping trigger slightly */
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-right: 4px solid;
+  left: 100%; /* To the right of tooltip content */
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
   top: 16px;
-  left: -4px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-right: 4px solid;
+  left: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
   bottom: 16px;
-  left: -4px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-right: 4px solid;
+  left: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-color: transparent transparent transparent transparent;
 }
 .ina-tooltip__content {
   max-width: 320px;
   min-width: fit-content;
 }
 /* Arrow colors - match parent bubble/card background color */
-/* Arrow is ::after on .ina-tooltip__content, so we use variant class on content */
+/* Following W3Schools pattern: only the side pointing to trigger has color */
 /* For basic variant - arrow color matches bubble background */
-.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic::after {
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-top::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-top-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-top-end::after {
   border-top-color: var(--ina-black, var(--ina-neutral-900));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-bottom::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-bottom-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-bottom-end::after {
   border-bottom-color: var(--ina-black, var(--ina-neutral-900));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-left::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-left-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-left-end::after {
   border-left-color: var(--ina-black, var(--ina-neutral-900));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-right::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-right-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic.ina-tooltip--placement-right-end::after {
   border-right-color: var(--ina-black, var(--ina-neutral-900));
 }
 
 /* For light variant - arrow color matches card background */
-.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after {
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-top::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-top-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-top-end::after {
   border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-bottom::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-bottom-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-bottom-end::after {
   border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-left::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-left-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-left-end::after {
   border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-right::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-right-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light.ina-tooltip--placement-right-end::after {
   border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
 }
 
 /* For dark variant - arrow color matches card background */
-.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-top::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-top-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-top-end::after {
   border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-bottom::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-bottom-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-bottom-end::after {
   border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-left::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-left-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-left-end::after {
   border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-right::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-right-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark.ina-tooltip--placement-right-end::after {
   border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
 }
 
 /* For media variant - arrow color matches card background */
-.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-top::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-top-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-top-end::after {
   border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-bottom::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-bottom-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-bottom-end::after {
   border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-left::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-left-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-left-end::after {
   border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-right::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-right-start::after,
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media.ina-tooltip--placement-right-end::after {
   border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
 }
 
 /* Visibility states */
 .ina-tooltip__content--visible {
-  opacity: 1;
-  visibility: visible;
+  opacity: 1 !important;
+  visibility: visible !important;
   transition: opacity 0.2s ease, visibility 0.2s ease;
 }