diff --git a/components/mdc/Tooltip/Tooltip.svelte b/components/mdc/Tooltip/Tooltip.svelte
index 3eba2896..137b2a1f 100644
--- a/components/mdc/Tooltip/Tooltip.svelte
+++ b/components/mdc/Tooltip/Tooltip.svelte
@@ -9,6 +9,8 @@ export let tooltipID
 export let positionX = undefined
 /** @type {string} can be one of: "above" or "below" */
 export let positionY = undefined
+/** @type {boolean} whether to show a rich tooltip */
+export let rich = false
 
 let element = {}
 let mdcToolTip = {}
@@ -35,8 +37,20 @@ onMount(() => {
 })
 </script>
 
-<div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
-  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
-    <slot />
+{#if rich}
+  <div bind:this={element} id={tooltipID} class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="tooltip">
+    <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
+      <p class="mdc-tooltip__content">
+        <slot />
+      </p>
+    </div>
   </div>
-</div>
+{:else}
+  <div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
+    <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
+      <span class="mdc-tooltip__label">
+        <slot />
+      </span>
+    </div>
+  </div>
+{/if}
diff --git a/components/mdc/Tooltip/Wrapper.svelte b/components/mdc/Tooltip/Wrapper.svelte
index 9751a543..1e7508e6 100644
--- a/components/mdc/Tooltip/Wrapper.svelte
+++ b/components/mdc/Tooltip/Wrapper.svelte
@@ -1,8 +1,10 @@
 <script>
 /** @type {string} The id of the element that describes the tooltip. */
 export let ariaDescribedBy
+/** @type {string} If the tooltip is rich set this to rich as well */
+export let rich = false
 </script>
 
-<div class={$$props.class || ''} aria-describedby={ariaDescribedBy}>
+<div class={(rich ? 'mdc-tooltip-wrapper--rich' : '') + ($$props.class || '')} aria-describedby={ariaDescribedBy}>
   <slot />
 </div>
diff --git a/index.d.ts b/index.d.ts
index 834b9ac5..349a855a 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -306,6 +306,7 @@ declare module '@silintl/ui-components' {
     tooltipID?: string
     positionX?: 'start' | 'center' | 'end'
     positionY?: 'above' | 'below'
+    rich?: boolean
     class?: string
   }
   export class Tooltip extends SvelteComponentTyped<TooltipProps> {}
@@ -313,6 +314,7 @@ declare module '@silintl/ui-components' {
   export namespace Tooltip {
     interface TooltipWrapperProps {
       ariaDescribedBy?: string
+      rich?: boolean
       class?: string
     }
     export class Wrapper extends SvelteComponentTyped<TooltipWrapperProps> {}
diff --git a/stories/Tooltip.stories.svelte b/stories/Tooltip.stories.svelte
index c31c6bc0..78760a0f 100644
--- a/stories/Tooltip.stories.svelte
+++ b/stories/Tooltip.stories.svelte
@@ -13,7 +13,7 @@ const args = {
 
 <Template let:args>
   <div class="flex justify-center my-4">
-    <Tooltip.Wrapper ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
+    <Tooltip.Wrapper rich={args.rich} ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
   </div>
 
   <Tooltip {...args}>Tooltip main slot here</Tooltip>
@@ -22,3 +22,5 @@ const args = {
 <Story name="Default" {args} />
 
 <Story name="Position" args={copyAndModifyArgs(args, { positionX: 'start', positionY: 'above' })} />
+
+<Story name="Rich" args={copyAndModifyArgs(args, { rich: true })} />