diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 66087abf..2cb347ef 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4228,19 +4228,20 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | let
| Yes | null | HTMLButtonElement
| null
| Obtain a reference to the button HTML element |
-| tooltipText | let
| No | string
| ""
| Specify the tooltip text |
-| align | let
| No | "start" | "center" | "end"
| "center"
| Set the alignment of the tooltip relative to the icon |
-| direction | let
| No | "top" | "right" | "bottom" | "left"
| "bottom"
| Set the direction of the tooltip relative to the icon |
-| id | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the span element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| ref | let
| Yes | null | HTMLButtonElement
| null
| Obtain a reference to the button HTML element |
+| tooltipText | let
| No | string
| ""
| Specify the tooltip text.
Alternatively, use the "text" slot |
+| align | let
| No | "start" | "center" | "end"
| "center"
| Set the alignment of the tooltip relative to the icon |
+| direction | let
| No | "top" | "right" | "bottom" | "left"
| "bottom"
| Set the direction of the tooltip relative to the icon |
+| id | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the span element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------- |
-| -- | Yes | -- | -- |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------- |
+| -- | Yes | -- | -- |
+| text | No | -- | {tooltipText}
|
### Events
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 74ccddda..7d141f14 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9678,7 +9678,7 @@
{
"name": "tooltipText",
"kind": "let",
- "description": "Specify the tooltip text",
+ "description": "Specify the tooltip text.\nAlternatively, use the \"text\" slot",
"type": "string",
"value": "\"\"",
"isFunction": false,
@@ -9726,7 +9726,15 @@
"reactive": true
}
],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ { "name": "__default__", "default": true, "slot_props": "{}" },
+ {
+ "name": "text",
+ "default": false,
+ "fallback": "{tooltipText}",
+ "slot_props": "{}"
+ }
+ ],
"events": [
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },
diff --git a/docs/src/pages/components/TooltipIcon.svx b/docs/src/pages/components/TooltipIcon.svx
index 3a672949..237660c3 100644
--- a/docs/src/pages/components/TooltipIcon.svx
+++ b/docs/src/pages/components/TooltipIcon.svx
@@ -16,4 +16,13 @@
-
\ No newline at end of file
+
+
+### Custom tooltip text
+
+Use the "text" slot to customize the tooltip text.
+
+
+ Carbon is an open source design system by IBM.
+
+
\ No newline at end of file
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index a0a32975..93c534c3 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -1,5 +1,8 @@