Merge pull request #1404 from Infineon/1385-tooltip-implement-min-and…

…-max-width

Enhancement: implement min and max width for tooltip

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "24.2.3",
+  "version": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "24.2.3",
+  "version": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^17.3.3",
     "@angular/platform-browser-dynamic": "^17.3.3",
     "@angular/router": "^17.3.3",
-    "@infineon/infineon-design-system-angular": "^24.2.3",
+    "@infineon/infineon-design-system-angular": "^24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.4"

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "24.2.3",
+  "version": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^17.3.3",
     "@angular/core": "^17.3.3",
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "^24.2.3"
+    "@infineon/infineon-design-system-stencil": "^24.3.0--canary.1404.e95202a0a4c6a1e596224a9d62bcf5077427b847.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "24.2.3",
+  "version": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.2.3"
+    "@infineon/infineon-design-system-stencil": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0"
   },
   "auto": {
     "plugins": [

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "24.2.3",
+  "version": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.2.3"
+    "@infineon/infineon-design-system-stencil": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "24.2.3",
+  "version": "24.3.0--canary.1404.1bdc97d0f737d29870aeaaf6cd091143bc6bcb6e.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/tooltip/tooltip.scss

@@ -19,12 +19,18 @@
   z-index: 1080;
   display: none;
   transition: opacity 0.3s;
-  position: relative;
+  position: absolute;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
   color: tokens.$ifxColorBaseWhite;
+  width: max-content;
+  box-sizing: border-box;
+
+  white-space: pre-wrap;   /* wraps text at spaces and within words */
+  word-wrap: break-word;   /* breaks text within a word if necessary */
+  overflow-wrap: anywhere; /* breaks text at arbitrary points when needed */
 
   &.visible {
     display: flex !important;
@@ -38,8 +44,6 @@
 
 .tooltip-dismissible {
   @extend %tooltip-common;
-  min-width: 110px;
-  width: auto;
 
     .close-button {
       all: unset;
@@ -92,8 +96,6 @@
 
 .tooltip-extended {
   @extend %tooltip-common;
-  min-width: 100px;
-  width: auto;
   //padding-left: 36px; // Added this line, adjust as per your icon width
   //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width
   align-items: center;
@@ -205,12 +207,18 @@
 
 .tooltip-compact {
   @extend %tooltip-arrow-positions;
+  min-width: 28px !important;
+  max-width: 145px !important;
 }
 
 .tooltip-dismissible {
   @extend %tooltip-arrow-positions;
+  min-width: 145px !important;
+  max-width: 310px !important;
 }
 
 .tooltip-extended {
   @extend %tooltip-arrow-positions;
-}
+  min-width: 145px !important;
+  max-width: 310px !important;
+}

packages/components/src/components/tooltip/tooltip.stories.ts

@@ -37,7 +37,7 @@ const DefaultTemplate = ({ header, text, variant, position, icon }) => {
   element.setAttribute('position', position);
   element.setAttribute('icon', icon);
 
-  element.textContent = "I'm the tooltip reference element - Please hover me"; // Set content for the reference element
+  element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element
 
   return element;
 };