diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index ac0e1660f..9fd21f1d5 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -160,6 +160,10 @@ export namespace Components {
         "activityDescriptors": Array<ActivityDescriptor>;
         "graph": Graph;
     }
+    interface ElsaTooltip {
+        "tooltipContent": any;
+        "tooltipPosition": string;
+    }
     interface ElsaWorkflowDefinitionBrowser {
         "hide": () => Promise<void>;
         "show": () => Promise<void>;
@@ -342,6 +346,12 @@ declare global {
         prototype: HTMLElsaToolboxActivitiesElement;
         new (): HTMLElsaToolboxActivitiesElement;
     };
+    interface HTMLElsaTooltipElement extends Components.ElsaTooltip, HTMLStencilElement {
+    }
+    var HTMLElsaTooltipElement: {
+        prototype: HTMLElsaTooltipElement;
+        new (): HTMLElsaTooltipElement;
+    };
     interface HTMLElsaWorkflowDefinitionBrowserElement extends Components.ElsaWorkflowDefinitionBrowser, HTMLStencilElement {
     }
     var HTMLElsaWorkflowDefinitionBrowserElement: {
@@ -410,6 +420,7 @@ declare global {
         "elsa-switch-editor": HTMLElsaSwitchEditorElement;
         "elsa-toolbox": HTMLElsaToolboxElement;
         "elsa-toolbox-activities": HTMLElsaToolboxActivitiesElement;
+        "elsa-tooltip": HTMLElsaTooltipElement;
         "elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
         "elsa-workflow-editor": HTMLElsaWorkflowEditorElement;
         "elsa-workflow-instance-browser": HTMLElsaWorkflowInstanceBrowserElement;
@@ -558,6 +569,10 @@ declare namespace LocalJSX {
         "activityDescriptors"?: Array<ActivityDescriptor>;
         "graph"?: Graph;
     }
+    interface ElsaTooltip {
+        "tooltipContent"?: any;
+        "tooltipPosition"?: string;
+    }
     interface ElsaWorkflowDefinitionBrowser {
         "onWorkflowDefinitionSelected"?: (event: CustomEvent<WorkflowDefinitionSummary>) => void;
     }
@@ -611,6 +626,7 @@ declare namespace LocalJSX {
         "elsa-switch-editor": ElsaSwitchEditor;
         "elsa-toolbox": ElsaToolbox;
         "elsa-toolbox-activities": ElsaToolboxActivities;
+        "elsa-tooltip": ElsaTooltip;
         "elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
         "elsa-workflow-editor": ElsaWorkflowEditor;
         "elsa-workflow-instance-browser": ElsaWorkflowInstanceBrowser;
@@ -649,6 +665,7 @@ declare module "@stencil/core" {
             "elsa-switch-editor": LocalJSX.ElsaSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaSwitchEditorElement>;
             "elsa-toolbox": LocalJSX.ElsaToolbox & JSXBase.HTMLAttributes<HTMLElsaToolboxElement>;
             "elsa-toolbox-activities": LocalJSX.ElsaToolboxActivities & JSXBase.HTMLAttributes<HTMLElsaToolboxActivitiesElement>;
+            "elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
             "elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
             "elsa-workflow-editor": LocalJSX.ElsaWorkflowEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowEditorElement>;
             "elsa-workflow-instance-browser": LocalJSX.ElsaWorkflowInstanceBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowInstanceBrowserElement>;
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/toolbox/toolbox-activities.tsx b/src/designer/elsa-workflows-designer/src/components/designer/toolbox/toolbox-activities.tsx
index 8f428e8e5..723714021 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/toolbox/toolbox-activities.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/toolbox/toolbox-activities.tsx
@@ -111,8 +111,10 @@ export class ToolboxActivities {
                 const activityHtml = renderedActivities.get(activityDescriptor.activityType);
                 return (
                   <div class="w-full flex items-center pl-10 pr-2 py-2">
-                    <div class="cursor-move" onDragStart={e => ToolboxActivities.onActivityStartDrag(e, activityDescriptor)}>
-                      <div innerHTML={activityHtml} draggable={true}/>
+                    <div class="relative cursor-move" onDragStart={e => ToolboxActivities.onActivityStartDrag(e, activityDescriptor)}>
+                      <elsa-tooltip tooltipPosition="right" tooltipContent={<p class="text-gray-600 text-sm">{activityDescriptor.description}</p>}>
+                        <div innerHTML={activityHtml} draggable={true} />
+                      </elsa-tooltip>
                     </div>
                   </div>
                 );
diff --git a/src/designer/elsa-workflows-designer/src/components/shared/tooltip/tooltip.scss b/src/designer/elsa-workflows-designer/src/components/shared/tooltip/tooltip.scss
new file mode 100644
index 000000000..da016b46b
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/components/shared/tooltip/tooltip.scss
@@ -0,0 +1,10 @@
+.tooltip-container {
+    .tooltip {
+        opacity: 0;
+    }
+    &:hover {
+        .tooltip {
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/designer/elsa-workflows-designer/src/components/shared/tooltip/tooltip.tsx b/src/designer/elsa-workflows-designer/src/components/shared/tooltip/tooltip.tsx
new file mode 100644
index 000000000..6553c47ec
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/components/shared/tooltip/tooltip.tsx
@@ -0,0 +1,60 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'elsa-tooltip',
+  styleUrl: 'tooltip.scss',
+})
+export class Tooltip {
+  @Prop() tooltipContent: any;
+  @Prop() tooltipPosition?: string = 'right';
+
+  getTooltipPositionClasses(tooltipPosition: string) {
+    const tooltipPositionClasses = {
+      right: 'top-1/2 -translate-y-1/2 left-full ml-4',
+      left: 'top-1/2 -translate-y-1/2 right-full mr-4',
+      top: 'left-1/2 -translate-x-1/2 bottom-full mb-4',
+      bottom: 'left-1/2 -translate-x-1/2 top-full mt-4',
+    };
+
+    const triangleClasses = {
+      right: 'left-0 -ml-2 bottom-0 top-0 h-full',
+      left: 'right-0 -mr-2 bottom-0 top-0 h-full rotate-180',
+      top: 'bottom-0 left-1/2 -mt-1 top-full -translate-x-1/2 -rotate-90',
+      bottom: 'top-0 left-1/2 -mb-1 bottom-full -translate-x-1/2 h-full rotate-90',
+    };
+
+    return {
+      tooltipClass: tooltipPositionClasses[tooltipPosition],
+      triangleClass: triangleClasses[tooltipPosition],
+    };
+  }
+  render() {
+    const { tooltipClass, triangleClass } = this.getTooltipPositionClasses(this.tooltipPosition);
+
+    return (
+      <div class="relative tooltip-container w-full">
+        <slot />
+        {this.tooltipContent && (
+          <div role="tooltip" class={`tooltip ${tooltipClass} z-20 w-48 absolute transition duration-150 ease-in-out shadow-lg bg-white p-4 rounded`}>
+            <svg class={`absolute ${triangleClass}`} width="9px" height="16px" viewBox="0 0 9 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="Tooltips-" transform="translate(-874.000000, -1029.000000)" fill="#FFFFFF">
+                  <g id="Group-3-Copy-16" transform="translate(850.000000, 975.000000)">
+                    <g id="Group-2" transform="translate(24.000000, 0.000000)">
+                      <polygon
+                        id="Triangle"
+                        transform="translate(4.500000, 62.000000) rotate(-90.000000) translate(-4.500000, -62.000000) "
+                        points="4.5 57.5 12.5 66.5 -3.5 66.5"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+            {this.tooltipContent}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/designer/elsa-workflows-designer/src/models/api.ts b/src/designer/elsa-workflows-designer/src/models/api.ts
index abd2ecac0..9aeb3137f 100644
--- a/src/designer/elsa-workflows-designer/src/models/api.ts
+++ b/src/designer/elsa-workflows-designer/src/models/api.ts
@@ -9,6 +9,7 @@ export interface ActivityDescriptor {
   activityType: string;
   displayName: string;
   category: string;
+  description: string;
   inputProperties: Array<InputDescriptor>
   kind: ActivityKind;
   inPorts: Array<Port>;