siemens · danielleroux · Feb 7, 2023 · Jan 17, 2023 · Jan 17, 2023 · Jan 18, 2023
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -76,6 +76,8 @@ import ToastCustom from 'src/preview-examples/toast-custom';
 import Toggle from 'src/preview-examples/toggle';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
 import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
+import Tooltip from 'src/preview-examples/tooltip';
+import TooltipTitle from 'src/preview-examples/tooltip-title';
 import Tree from 'src/preview-examples/tree';
 import TreeCustom from 'src/preview-examples/tree-custom';
 import Upload from 'src/preview-examples/upload';
@@ -259,6 +261,8 @@ const routes: Routes = [
       { path: 'workflow-vertical', component: WorkflowVertical },
       { path: 'map-navigation', component: MapNavigation },
       { path: 'map-navigation-overlay', component: MapNavigationOverlay },
+      { path: 'tooltip', component: Tooltip },
+      { path: 'tooltip-title', component: TooltipTitle },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -83,6 +83,8 @@ import ToastCustom from 'src/preview-examples/toast-custom';
 import Toggle from 'src/preview-examples/toggle';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
 import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
+import Tooltip from 'src/preview-examples/tooltip';
+import TooltipTitle from 'src/preview-examples/tooltip-title';
 import Tree from 'src/preview-examples/tree';
 import TreeCustom from 'src/preview-examples/tree-custom';
 import Upload from 'src/preview-examples/upload';
@@ -172,6 +174,8 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     MapNavigationOverlay,
     TabsRounded,
     DatepickerRange,
+    Tooltip,
+    TooltipTitle,
   ],
   imports: [
     BrowserModule,

diff --git a/packages/angular-test-app/src/preview-examples/tooltip-title.html b/packages/angular-test-app/src/preview-examples/tooltip-title.html
@@ -0,0 +1,7 @@
+<div style="padding: 4rem">
+  <ix-button data-tooltip="myTooltip">Hover me</ix-button>
+  <ix-tooltip for="[data-tooltip='myTooltip']" title-content="My Tooltip">
+    <ix-icon name="rocket" slot="title-icon"></ix-icon>
+    Some example content
+  </ix-tooltip>
+</div>
diff --git a/packages/angular-test-app/src/preview-examples/tooltip-title.ts b/packages/angular-test-app/src/preview-examples/tooltip-title.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './tooltip-title.html',
+})
+export default class TooltipTitle {}
diff --git a/packages/angular-test-app/src/preview-examples/tooltip.html b/packages/angular-test-app/src/preview-examples/tooltip.html
@@ -0,0 +1,4 @@
+<div style="padding: 4rem">
+  <ix-button data-tooltip="myTooltip">Hover me</ix-button>
+  <ix-tooltip for="[data-tooltip='myTooltip']">Some example content</ix-tooltip>
+</div>
diff --git a/packages/angular-test-app/src/preview-examples/tooltip.ts b/packages/angular-test-app/src/preview-examples/tooltip.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './tooltip.html',
+})
+export default class Tooltip {}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1568,6 +1568,27 @@ export class IxToggle {
 }
 
 
+export declare interface IxTooltip extends Components.IxTooltip {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['for', 'interactive', 'titleContent']
+})
+@Component({
+  selector: 'ix-tooltip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['for', 'interactive', 'titleContent']
+})
+export class IxTooltip {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface IxTreeItem extends Components.IxTreeItem {
   /**
    * Expand/Collapsed toggled 

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -62,6 +62,7 @@ export const DIRECTIVES = [
   d.IxToast,
   d.IxToastContainer,
   d.IxToggle,
+  d.IxTooltip,
   d.IxTreeItem,
   d.IxUpload,
   d.IxValidationTooltip,

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -8433,6 +8433,107 @@
         }
       ]
     },
+    {
+      "dirPath": "./src/components/tooltip",
+      "filePath": "./src/components/tooltip/tooltip.tsx",
+      "fileName": "tooltip.tsx",
+      "readmePath": "./src/components/tooltip/readme.md",
+      "usagesDir": "./src/components/tooltip/usage",
+      "tag": "ix-tooltip",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "title-icon - Icon of tooltip title"
+        },
+        {
+          "name": "slot",
+          "text": "title-content - Content of tooltip title"
+        },
+        {
+          "name": "since",
+          "text": "1.3.0"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [
+        "ix-typography"
+      ],
+      "dependencyGraph": {
+        "ix-tooltip": [
+          "ix-typography"
+        ]
+      },
+      "props": [
+        {
+          "name": "for",
+          "type": "string",
+          "mutable": false,
+          "attr": "for",
+          "reflectToAttr": false,
+          "docs": "CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "interactive",
+          "reflectToAttr": false,
+          "docs": "Define if the user can access the tooltip via mouse.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "titleContent",
+          "type": "string",
+          "mutable": false,
+          "attr": "title-content",
+          "reflectToAttr": false,
+          "docs": "Title of the tooltip",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "title-content",
+          "docs": "Content of tooltip title"
+        },
+        {
+          "name": "title-icon",
+          "docs": "Icon of tooltip title"
+        }
+      ],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/tree",
       "filePath": "./src/components/tree/tree.tsx",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -42,7 +42,7 @@
     "generate:theme": "ts-node -P ./scripts/generate-theme/tsconfig.json ./scripts/generate-theme/generate-theme"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.6",
+    "@floating-ui/dom": "^1.1.0",
     "@stencil/core": "~2.19.2",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -19,6 +19,7 @@ import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
 import { ToastConfig, ToastType } from "./components/toast/toast-utils";
 import { TypedEvent } from "./components/utils/typed-event";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
+import { TypographyVariants } from "./components/typography/types";
 import { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
     interface IxAnimatedTab {
@@ -1370,6 +1371,20 @@ export namespace Components {
          */
         "textOn": string;
     }
+    interface IxTooltip {
+        /**
+          * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
+         */
+        "for": string;
+        /**
+          * Define if the user can access the tooltip via mouse.
+         */
+        "interactive": boolean;
+        /**
+          * Title of the tooltip
+         */
+        "titleContent": string;
+    }
     interface IxTree {
         /**
           * Selection and collapsed state management
@@ -1408,6 +1423,12 @@ export namespace Components {
          */
         "text": string;
     }
+    interface IxTypography {
+        /**
+          * Font variant
+         */
+        "variant": TypographyVariants;
+    }
     interface IxUpload {
         /**
           * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"}
@@ -2021,6 +2042,12 @@ declare global {
         prototype: HTMLIxToggleElement;
         new (): HTMLIxToggleElement;
     };
+    interface HTMLIxTooltipElement extends Components.IxTooltip, HTMLStencilElement {
+    }
+    var HTMLIxTooltipElement: {
+        prototype: HTMLIxTooltipElement;
+        new (): HTMLIxTooltipElement;
+    };
     interface HTMLIxTreeElement extends Components.IxTree, HTMLStencilElement {
     }
     var HTMLIxTreeElement: {
@@ -2033,6 +2060,12 @@ declare global {
         prototype: HTMLIxTreeItemElement;
         new (): HTMLIxTreeItemElement;
     };
+    interface HTMLIxTypographyElement extends Components.IxTypography, HTMLStencilElement {
+    }
+    var HTMLIxTypographyElement: {
+        prototype: HTMLIxTypographyElement;
+        new (): HTMLIxTypographyElement;
+    };
     interface HTMLIxUploadElement extends Components.IxUpload, HTMLStencilElement {
     }
     var HTMLIxUploadElement: {
@@ -2124,8 +2157,10 @@ declare global {
         "ix-toast": HTMLIxToastElement;
         "ix-toast-container": HTMLIxToastContainerElement;
         "ix-toggle": HTMLIxToggleElement;
+        "ix-tooltip": HTMLIxTooltipElement;
         "ix-tree": HTMLIxTreeElement;
         "ix-tree-item": HTMLIxTreeItemElement;
+        "ix-typography": HTMLIxTypographyElement;
         "ix-upload": HTMLIxUploadElement;
         "ix-validation-tooltip": HTMLIxValidationTooltipElement;
         "ix-workflow-step": HTMLIxWorkflowStepElement;
@@ -3607,6 +3642,20 @@ declare namespace LocalJSX {
          */
         "textOn"?: string;
     }
+    interface IxTooltip {
+        /**
+          * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
+         */
+        "for"?: string;
+        /**
+          * Define if the user can access the tooltip via mouse.
+         */
+        "interactive"?: boolean;
+        /**
+          * Title of the tooltip
+         */
+        "titleContent"?: string;
+    }
     interface IxTree {
         /**
           * Selection and collapsed state management
@@ -3661,6 +3710,12 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    interface IxTypography {
+        /**
+          * Font variant
+         */
+        "variant"?: TypographyVariants;
+    }
     interface IxUpload {
         /**
           * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"}
@@ -3832,8 +3887,10 @@ declare namespace LocalJSX {
         "ix-toast": IxToast;
         "ix-toast-container": IxToastContainer;
         "ix-toggle": IxToggle;
+        "ix-tooltip": IxTooltip;
         "ix-tree": IxTree;
         "ix-tree-item": IxTreeItem;
+        "ix-typography": IxTypography;
         "ix-upload": IxUpload;
         "ix-validation-tooltip": IxValidationTooltip;
         "ix-workflow-step": IxWorkflowStep;
@@ -3905,8 +3962,10 @@ declare module "@stencil/core" {
             "ix-toast": LocalJSX.IxToast & JSXBase.HTMLAttributes<HTMLIxToastElement>;
             "ix-toast-container": LocalJSX.IxToastContainer & JSXBase.HTMLAttributes<HTMLIxToastContainerElement>;
             "ix-toggle": LocalJSX.IxToggle & JSXBase.HTMLAttributes<HTMLIxToggleElement>;
+            "ix-tooltip": LocalJSX.IxTooltip & JSXBase.HTMLAttributes<HTMLIxTooltipElement>;
             "ix-tree": LocalJSX.IxTree & JSXBase.HTMLAttributes<HTMLIxTreeElement>;
             "ix-tree-item": LocalJSX.IxTreeItem & JSXBase.HTMLAttributes<HTMLIxTreeItemElement>;
+            "ix-typography": LocalJSX.IxTypography & JSXBase.HTMLAttributes<HTMLIxTypographyElement>;
             "ix-upload": LocalJSX.IxUpload & JSXBase.HTMLAttributes<HTMLIxUploadElement>;
             "ix-validation-tooltip": LocalJSX.IxValidationTooltip & JSXBase.HTMLAttributes<HTMLIxValidationTooltipElement>;
             "ix-workflow-step": LocalJSX.IxWorkflowStep & JSXBase.HTMLAttributes<HTMLIxWorkflowStepElement>;

diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss
@@ -11,7 +11,7 @@
 
 :host {
   display: flex;
-  flex-direction: column;
+  position: relative;
   width: 100vw;
   height: 100vh;
 }