diff --git a/.changeset/smooth-snails-retire.md b/.changeset/smooth-snails-retire.md
new file mode 100644
index 00000000000..97c4cf867fd
--- /dev/null
+++ b/.changeset/smooth-snails-retire.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+Update padding and icon alignment of **ix-tooltip**.
diff --git a/packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.html b/packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.html
new file mode 100644
index 00000000000..d7ffba8d12d
--- /dev/null
+++ b/packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.html
@@ -0,0 +1,15 @@
+
+
+Hover me
+
+
+ Tooltip Title
+ Simple selector with icon
+
diff --git a/packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.ts b/packages/angular-standalone-test-app/src/preview-examples/tooltip-with-icon.ts
new file mode 100644
index 00000000000..c445f80e8d5
--- /dev/null
+++ b/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 {}
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index 93cba83b6db..4edd319db7c 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -171,6 +171,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';
@@ -925,6 +926,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 },
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index 5165b2cf64e..8a6762f9f25 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -235,6 +235,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';
@@ -449,6 +450,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
ToggleNgModel,
Toggle,
Tooltip,
+ TooltipWithIcon,
TreeCustom,
Tree,
Upload,
diff --git a/packages/angular-test-app/src/preview-examples/tooltip-with-icon.html b/packages/angular-test-app/src/preview-examples/tooltip-with-icon.html
new file mode 100644
index 00000000000..3bd672a8ffd
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/tooltip-with-icon.html
@@ -0,0 +1,15 @@
+
+
+Hover me
+
+
+ Tooltip Title
+ Simple selector with icon
+
diff --git a/packages/angular-test-app/src/preview-examples/tooltip-with-icon.ts b/packages/angular-test-app/src/preview-examples/tooltip-with-icon.ts
new file mode 100644
index 00000000000..7362a792d79
--- /dev/null
+++ b/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 {}
diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
index 6fd3fe944f1..5e9a2a5d7bc 100644
--- a/packages/core/src/components/tooltip/tooltip.scss
+++ b/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;
}
}
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
index 91398794d8e..c5a5397d3f7 100644
--- a/packages/core/src/components/tooltip/tooltip.tsx
+++ b/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 = {
@@ -46,7 +47,7 @@ const numberToPixel = (value?: number | null) =>
let tooltipInstance = 0;
/**
- * @slot title-icon - Icon of tooltip title
+ * @slot title-icon - Icon displayed next to the tooltip title. The icon will be displayed as 16x16px.
* @slot title-content - Content of tooltip title
*/
@Component({
@@ -473,6 +474,16 @@ export class Tooltip {
this.disposeTooltipListener?.();
this.disposeDomChangeListener?.();
}
+ private handleTitleIconSlotChange(e: Event) {
+ const slot = e.target as HTMLSlotElement;
+ const elements = getSlottedElements(slot);
+
+ for (const element of elements) {
+ if (element.tagName.toLowerCase() === 'ix-icon') {
+ (element as HTMLIxIconElement).size = '16';
+ }
+ }
+ }
render() {
return (
@@ -487,7 +498,10 @@ export class Tooltip {