@aquera/nile-elements 0.1.28-beta-1.4 → 0.1.28-beta-1.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.28-beta-1.4",
+  "version": "0.1.28-beta-1.5",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -11,60 +11,119 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
-  :host {
-    --max-width: 20rem;
-    --hide-delay: 0ms;
-    --show-delay: 150ms;
-
-    display: contents;
-  }
-
-  .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
-  }
-
-  .tooltip::part(popup) {
-    pointer-events: none;
-    z-index: 1000;
-  }
-
-  .tooltip[placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .tooltip[placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .tooltip[placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .tooltip[placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .tooltip__body {
-    display: block;
-    width: max-content;
-    max-width: var(--max-width);
-    border-radius: 4px;
-    background-color: var(--nile-tooltip-color-background);
-    font-size: var(--nile-tooltip-font-size-sm);
-    font-weight: var(--nile-tooltip-font-weight-sm);
-    line-height: var(--nile-tooltip-line-height-sm);
-    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: var(--nile-colors-white-base);
-    pointer-events: none;
-    word-break: break-word;
-  }
-
-  .tooltip__body--large {
-    font-size: var(--nile-tooltip-font-size-lg);
-    line-height: var(--nile-tooltip-line-height-lg);
-    font-weight: var(--nile-tooltip-font-weight-lg);
-  }
+
+
+:host {
+      position: relative;
+      display: inline-block;
+    }
+
+    .tooltip {
+      position: fixed;
+      z-index: 1000;
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+      white-space: nowrap;
+      visibility: hidden;
+      transform: scale(0.95);
+      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    }
+
+    .tooltip[open] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+    :host([open]) .tooltip {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .tooltip__body--large {
+      font-size: var(--nile-type-scale-4, 16px);
+      line-height: var(--nile-tooltip-line-height-lg, 1.75);
+    }
+
+    /* Tooltip Arrow */
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+    }
+
+    /* Basic Arrow Positions */
+    .tooltip[data-placement^="top"]::after {
+      bottom: -6px;
+      border-width: 6px 6px 0 6px;
+      border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;
+    }
+
+    .tooltip[data-placement^="bottom"]::after {
+      top: -6px;
+      border-width: 0 6px 6px 6px;
+      border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;
+    }
+
+    .tooltip[data-placement^="left"]::after {
+      right: -6px;
+      border-width: 6px 0 6px 6px;
+      border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);
+    }
+
+    .tooltip[data-placement^="right"]::after {
+      left: -6px;
+      border-width: 6px 6px 6px 0;
+      border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;
+    }
+
+    /* Arrow Horizontal Alignment for top/bottom placements */
+    .tooltip[data-placement="top"]::after,
+    .tooltip[data-placement="bottom"]::after {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .tooltip[data-placement="top-start"]::after,
+    .tooltip[data-placement="bottom-start"]::after {
+      left: 12px;
+    }
+
+    .tooltip[data-placement="top-end"]::after,
+    .tooltip[data-placement="bottom-end"]::after {
+      right: 12px;
+      left: auto;
+    }
+
+    /* Arrow Vertical Alignment for left/right placements */
+    .tooltip[data-placement="left"]::after,
+    .tooltip[data-placement="right"]::after {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .tooltip[data-placement="left-start"]::after,
+    .tooltip[data-placement="right-start"]::after {
+      top: 12px;
+      transform: none;
+    }
+
+    .tooltip[data-placement="left-end"]::after,
+    .tooltip[data-placement="right-end"]::after {
+      bottom: 12px;
+      top: auto;
+      transform: none;
+    }
+  
 `;
 
 export default [styles];