fix(core/tooltip): update padding and align icon size with figma

packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.html

@@ -0,0 +1,15 @@
+<!--
+SPDX-FileCopyrightText: 2025 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.
+-->
+
+<ix-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+<ix-tooltip id="tooltip-1" for=".any-class">
+  <ix-icon slot="title-icon" name="info"></ix-icon>
+  <div slot="title-content">Tooltip Title</div>
+  Simple selector with icon
+</ix-tooltip>

packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.ts

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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';
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxTooltip, IxIcon],
+  templateUrl: './tooltip-with-icon.html',
+  styleUrls: ['./tooltip.css'],
+})
+export default class Tooltip {}

packages/angular-test-app/src/app/app-routing.module.ts

@@ -177,6 +177,7 @@ import PaneLayout from '../preview-examples/pane-layout';
 import Pill from '../preview-examples/pill';
 import PillVariants from '../preview-examples/pill-variants';
 import PopoverNews from '../preview-examples/popover-news';
+import TooltipWithIcon from '../preview-examples/tooltip-with-icon';
 import ProgressIndicator from '../preview-examples/progress-indicator';
 import ProgressIndicatorCircular from '../preview-examples/progress-indicator-circular';
 import ProgressIndicatorCircularSizes from '../preview-examples/progress-indicator-circular-sizes';
@@ -954,6 +955,7 @@ const routes: Routes = [
       { path: 'number-input-validation', component: NumberInputValidation },
       { path: 'number-input-with-slots', component: NumberInputWithSlots },
       { path: 'tooltip', component: Tooltip },
+      { path: 'tooltip-with-icon', component: TooltipWithIcon },
       { path: 'modal-by-instance', component: ModalByInstance },
       { path: 'push-card', component: PushCard },
       { path: 'action-card', component: ActionCard },

packages/angular-test-app/src/app/app.module.ts

@@ -234,6 +234,7 @@ import ToggleDisabled from '../preview-examples/toggle-disabled';
 import ToggleIndeterminate from '../preview-examples/toggle-indeterminate';
 import ToggleNgModel from '../preview-examples/toggle-ng-model';
 import Tooltip from '../preview-examples/tooltip';
+import TooltipWithIcon from '../preview-examples/tooltip-with-icon';
 import Tree from '../preview-examples/tree';
 import TreeCustom from '../preview-examples/tree-custom';
 import Upload from '../preview-examples/upload';
@@ -460,6 +461,7 @@ import ProgressIndicatorCircular from '../preview-examples/progress-indicator-ci
     ToggleNgModel,
     Toggle,
     Tooltip,
+    TooltipWithIcon,
     TreeCustom,
     Tree,
     Upload,

packages/angular-test-app/src/preview-examples/tooltip-with-icon.html

@@ -0,0 +1,15 @@
+<!--
+SPDX-FileCopyrightText: 2024 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.
+-->
+
+<ix-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+<ix-tooltip id="tooltip-1" for=".any-class">
+  <ix-icon slot="title-icon" name="info"></ix-icon>
+  <div slot="title-content">Tooltip Title</div>
+  Simple selector with icon
+</ix-tooltip>

packages/angular-test-app/src/preview-examples/tooltip-with-icon.ts

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './tooltip-with-icon.html',
+  styleUrls: ['./tooltip.css'],
+})
+export default class TooltipWithIcon {}

packages/core/component-doc.json

@@ -27154,7 +27154,7 @@
       "docsTags": [
         {
           "name": "slot",
-          "text": "title-icon - Icon of tooltip title"
+          "text": "title-icon - Icon of tooltip title. The icon will be displayed as 16x16px."
         },
         {
           "name": "slot",
@@ -27350,7 +27350,7 @@
         },
         {
           "name": "title-icon",
-          "docs": "Icon of tooltip title"
+          "docs": "Icon of tooltip title. The icon will be displayed as 16x16px."
         }
       ],
       "parts": [],

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

@@ -26,7 +26,7 @@
   height: fit-content;
   background: var(--theme-tootlip--background);
   color: var(--theme-color-std-text);
-  padding: 0.375rem 0.75rem 0.375rem 0.875rem;
+  padding: 0.375rem 0.75rem;
 
   box-shadow: var(--theme-shadow-4);
   border-radius: 0.25rem;
@@ -38,10 +38,9 @@
 
 .tooltip-title {
   display: flex;
-  align-items: center;
 
   ::slotted(ix-icon) {
-    margin-right: 0.35rem;
+    margin: 0.125rem 0.25rem 0.125rem 0;
   }
 }
 

packages/core/src/components/tooltip/tooltip.tsx

@@ -29,6 +29,7 @@ import {
 import { resolveSelector } from '../utils/find-element';
 import { ElementReference } from 'src/components';
 import { makeRef } from '../utils/make-ref';
+import { getSlottedElements } from '../utils/shadow-dom';
 import { addDisposableEventListenerAsArray } from '../utils/disposable-event-listener';
 
 type ArrowPosition = {
@@ -43,7 +44,7 @@ const numberToPixel = (value?: number | null) =>
 let tooltipInstance = 0;
 
 /**
- * @slot title-icon - Icon of tooltip title
+ * @slot title-icon - Icon of tooltip title. The icon will be displayed as 16x16px.
  * @slot title-content - Content of tooltip title
  */
 @Component({
@@ -470,6 +471,16 @@ export class Tooltip {
     this.disposeTooltipListener?.();
     this.disposeDomChangeListener?.();
   }
+  private handleTitleIconSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const elements = getSlottedElements<HTMLElement>(slot);
+
+    elements.forEach((element) => {
+      if (element.tagName.toLowerCase() === 'ix-icon') {
+        (element as HTMLIxIconElement).size = '16';
+      }
+    });
+  }
 
   render() {
     return (
@@ -484,7 +495,10 @@ export class Tooltip {
           <div class="tooltip-container">
             <div class="content-wrapper">
               <div class={'tooltip-title'}>
-                <slot name="title-icon"></slot>
+                <slot
+                  name="title-icon"
+                  onSlotchange={(e) => this.handleTitleIconSlotChange(e)}
+                ></slot>
                 <ix-typography format="h5">
                   {this.titleContent}
                   <slot name="title-content"></slot>

packages/html-test-app/src/preview-examples/tooltip-with-icon.html

@@ -0,0 +1,38 @@
+<!--
+SPDX-FileCopyrightText: 2024 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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tooltip example</title>
+    <link rel="stylesheet" href="./tooltip.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconInfo } from '@siemens/ix-icons/icons';
+
+      addIcons({
+        iconInfo,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-button class="any-class" aria-describedby="tooltip-1">
+      Hover me
+    </ix-button>
+    <ix-tooltip id="tooltip-1" for=".any-class">
+      <ix-icon slot="title-icon" name="info"></ix-icon>
+      <div slot="title-content">Tooltip Title</div>
+      Simple selector with icon
+    </ix-tooltip>
+
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>

packages/react-test-app/src/main.tsx

@@ -212,6 +212,7 @@ import ToggleButtonPrimaryGhost from './preview-examples/toggle-button-primary-g
 import ToggleButtonPrimaryOutline from './preview-examples/toggle-button-primary-outline';
 import ToggleButtonSecondary from './preview-examples/toggle-button-secondary';
 import ToggleButtonSecondaryGhost from './preview-examples/toggle-button-secondary-ghost';
+import TooltipWithIcon from './preview-examples/tooltip-with-icon';
 import ToggleButtonSecondaryOutline from './preview-examples/toggle-button-secondary-outline';
 import ToggleChecked from './preview-examples/toggle-checked';
 import ToggleCustomLabel from './preview-examples/toggle-custom-label';
@@ -686,6 +687,10 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         />
         <Route path="/preview/toggle" element={<Toggle />} />
         <Route path="/preview/tooltip" element={<Tooltip />} />
+        <Route
+          path="/preview/tooltip-with-icon"
+          element={<TooltipWithIcon />}
+        />
         <Route path="/preview/tree-custom" element={<TreeCustom />} />
         <Route path="/preview/number-input" element={<NumberInput />} />
         <Route

packages/react-test-app/src/preview-examples/tooltip-with-icon.tsx

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 './tooltip.scoped.css';
+
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
+
+export default () => {
+  return (
+    <>
+      <IxButton className="any-class" aria-describedby="tooltip-1">
+        Hover me
+      </IxButton>
+      <IxTooltip id="tooltip-1" for=".any-class">
+        <IxIcon slot="title-icon" name={iconInfo}></IxIcon>
+        <div slot="title-content">Tooltip Title</div>
+        Simple selector with icon
+      </IxTooltip>
+    </>
+  );
+};

packages/react-test-app/src/preview-examples/tooltip.tsx

@@ -14,7 +14,7 @@ import { IxButton, IxTooltip } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton class="any-class" aria-describedby="tooltip-1">
+      <IxButton className="any-class" aria-describedby="tooltip-1">
         Hover me
       </IxButton>
       <IxTooltip id="tooltip-1" for=".any-class">

packages/vue-test-app/src/Root.vue

@@ -10,8 +10,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { IxApplicationContext } from "@siemens/ix-vue"
-
+import { IxApplicationContext } from '@siemens/ix-vue';
 
 import App from './App.vue';
 import AboutAndLegal from './preview-examples/about-and-legal.vue';
@@ -222,6 +221,7 @@ import ToggleDisabled from './preview-examples/toggle-disabled.vue';
 import ToggleIndeterminate from './preview-examples/toggle-indeterminate.vue';
 import Toggle from './preview-examples/toggle.vue';
 import Tooltip from './preview-examples/tooltip.vue';
+import TooltipWithIcon from './preview-examples/tooltip-with-icon.vue';
 import TreeCustom from './preview-examples/tree-custom.vue';
 import Tree from './preview-examples/tree.vue';
 import Upload from './preview-examples/upload.vue';
@@ -414,6 +414,7 @@ const routes: any = {
   '/preview/map-navigation-overlay': MapNavigationOverlay,
   '/preview/map-navigation-migration': MapNavigationMigration,
   '/preview/tooltip': Tooltip,
+  '/preview/tooltip-with-icon': TooltipWithIcon,
   '/preview/push-card': PushCard,
   '/preview/page-header': ContentHeader,
   '/preview/page-header-no-back': ContentHeaderNoBack,

packages/vue-test-app/src/preview-examples/tooltip-with-icon.vue

@@ -0,0 +1,24 @@
+<!--
+ * SPDX-FileCopyrightText: 2024 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.
+-->
+
+<script setup lang="ts">
+import { IxButton, IxTooltip, IxIcon } from '@siemens/ix-vue';
+import { iconInfo } from '@siemens/ix-icons/icons';
+</script>
+
+<style scoped src="./tooltip.css"></style>
+
+<template>
+  <IxButton class="any-class" aria-describedby="tooltip-1"> Hover me </IxButton>
+  <IxTooltip id="tooltip-1" for=".any-class">
+    <IxIcon slot="title-icon" :name="iconInfo"></IxIcon>
+    <div slot="title-content">Tooltip Title</div>
+    Simple selector with icon</IxTooltip
+  >
+</template>