diff --git a/packages/core/src/components/Text/Text.tsx b/packages/core/src/components/Text/Text.tsx
index 04bbca5664..69a0191a02 100644
--- a/packages/core/src/components/Text/Text.tsx
+++ b/packages/core/src/components/Text/Text.tsx
@@ -10,7 +10,7 @@ import { withStaticProps } from "../../types";
 import styles from "./Text.module.scss";
 
 export interface TextProps extends TypographyProps {
-  type: TextType;
+  type?: TextType;
   weight?: TextWeight;
   children: ReactNode;
 }
diff --git a/packages/core/src/components/Tipseen/__stories__/tipseen.mdx b/packages/core/src/components/Tipseen/__stories__/tipseen.mdx
index 946cafec63..242a277ab0 100644
--- a/packages/core/src/components/Tipseen/__stories__/tipseen.mdx
+++ b/packages/core/src/components/Tipseen/__stories__/tipseen.mdx
@@ -81,7 +81,7 @@ Wrap your custom media with `TipseenMedia` component. This use case is good for
 Use Floating Tipseen in case where the guidance is not relevant to a specific UI element, but general.
 In this case, the Tipseen position will be the right corner of the screen and without an arrow tip.
 
-<Canvas of={TipseenStories.FloatingTipseen} height={"500px"} />
+<Canvas of={TipseenStories.FloatingTipseen} story={{ height: "500px" }} />
 
 ## Do’s and Don’ts
 
@@ -96,7 +96,9 @@ In this case, the Tipseen position will be the right corner of the screen and wi
               modifiers={modifiers}
               position={Tipseen.positions.RIGHT}
               color={Tipseen.colors.INVERTED}
-              content={<TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />}
+              content={
+                <TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />
+              }
             >
               <div className="monday-storybook-tipseen_inline-container right" />{" "}
             </Tipseen>
@@ -118,8 +120,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             </Tipseen>
           </div>
         ),
-        description:
-          "Don’t finish the Tipseen wizard process with a disabled CTA."
+        description: "Don’t finish the Tipseen wizard process with a disabled CTA."
       }
     },
     {
@@ -157,7 +158,11 @@ In this case, the Tipseen position will be the right corner of the screen and wi
               modifiers={modifiers}
               position={Tipseen.positions.TOP}
               color={Tipseen.colors.INVERTED}
-              content={<TipseenContent>You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.</TipseenContent>}
+              content={
+                <TipseenContent>
+                  You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.
+                </TipseenContent>
+              }
             >
               <div className="monday-storybook-tipseen_inline-container" />
             </Tipseen>
@@ -172,7 +177,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
         )
       }
     },
-        {
+    {
       positive: {
         component: (
           <div className="monday-storybook-tipseen_box">
@@ -189,8 +194,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             </Tipseen>
           </div>
         ),
-        description:
-          "Add a pointer to indicate the specific component that the tipseen comes from."
+        description: "Add a pointer to indicate the specific component that the tipseen comes from."
       },
       negative: {
         component: (
@@ -209,8 +213,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             </Tipseen>
           </div>
         ),
-        description:
-          "Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
+        description: "Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
       }
     }
   ]}
diff --git a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
index 35dd89f6af..94dd121ebf 100644
--- a/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
+++ b/packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss
@@ -24,7 +24,6 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
   }
 
   &_image {
-    width: 320px;
     height: 175px;
   }
 
@@ -69,7 +68,7 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center
+    justify-content: center;
   }
 
   &_small-box {
diff --git a/packages/core/src/components/Tooltip/Tooltip.module.scss b/packages/core/src/components/Tooltip/Tooltip.module.scss
index 772d6fbe44..a71af678af 100644
--- a/packages/core/src/components/Tooltip/Tooltip.module.scss
+++ b/packages/core/src/components/Tooltip/Tooltip.module.scss
@@ -12,9 +12,36 @@ $tooltip-z-index: 9999999999999999;
   max-width: var(--tooltip-max-width, 50vw);
   word-break: break-word;
 
+  &.tooltipWithContent {
+    padding: unset;
+  }
+
   &.withMaxWidth {
     --tooltip-max-width: 240px;
   }
+
+  .image {
+    display: block;
+    position: relative;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    padding: 2px 2px 0 2px;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    min-width: var(--tooltip-max-width);
+    z-index: 1;
+  }
+
+  .title {
+    @include vibe-text(text2, bold);
+  }
+
+  .content {
+    word-break: break-word;
+    display: inline-block;
+    padding: var(--tooltip-padding, #{var(--spacing-small) var(--spacing-medium)});
+  }
 }
 
 .tooltip.paddingSizeMd {
diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
index ea440f38dc..c20915af2b 100644
--- a/packages/core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -13,6 +13,9 @@ import { MoveBy } from "../../types/MoveBy";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./Tooltip.module.scss";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
+import { SubIcon } from "../../types";
+import Icon from "../Icon/Icon";
+import Flex from "../Flex/Flex";
 
 export type TooltipProps = TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps);
 
@@ -100,7 +103,7 @@ interface TooltipBaseProps extends VibeComponentProps {
    */
   showOnDialogEnter?: boolean;
   /**
-   * A Classname to be added to <spam> element which wraps the children
+   * A Classname to be added to <span> element which wraps the children
    */
   referenceWrapperClassName?: string;
   /**
@@ -115,11 +118,23 @@ interface TooltipBaseProps extends VibeComponentProps {
    * Overwrites z-index of the tooltip
    */
   zIndex?: number;
-  // TODO: make defualt next major
+  // TODO: make default next major
   /**
    * Limit tooltip to 240px
    */
   withMaxWidth?: boolean;
+  /**
+   * The title of the tooltip
+   */
+  title?: string;
+  /**
+   * The image of the tooltip
+   */
+  image?: string;
+  /**
+   * The icon of the tooltip next to the title
+   */
+  icon?: SubIcon;
 }
 // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately
 const IMMEDIATE_SHOW_THRESHOLD_MS = 1500;
@@ -175,7 +190,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, paddingSize, className, style, withMaxWidth } = this.props;
+    const { theme, content, paddingSize, className, style, withMaxWidth, title, image, icon } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -192,6 +207,34 @@ export default class Tooltip extends PureComponent<TooltipProps> {
     if (!contentValue) {
       return null;
     }
+
+    if (title || image) {
+      return (
+        <div
+          style={style}
+          className={cx(
+            styles.tooltip,
+            styles.tooltipWithContent,
+            getStyle(styles, camelCase(theme)),
+            { [styles.withMaxWidth]: withMaxWidth },
+            className
+          )}
+        >
+          {image && <img className={styles.image} src={image} alt="" />}
+          <div className={cx(styles.content, getStyle(styles, camelCase("padding-size-" + paddingSize)))}>
+            {title && (
+              <Flex gap={Flex.gaps.XS}>
+                {icon && <Icon iconSize="20" icon={icon} clickable={false} />}
+                <div className={styles.title}>{title}</div>
+              </Flex>
+            )}
+            {contentValue}
+          </div>
+        </div>
+      );
+    }
+
+    // TODO: remove in next major, use (title || image) variant instead
     return (
       <div
         style={style}
diff --git a/packages/core/src/components/Tooltip/__stories__/TooltipContent.jsx b/packages/core/src/components/Tooltip/__stories__/TooltipContent.jsx
deleted file mode 100644
index 4b984401eb..0000000000
--- a/packages/core/src/components/Tooltip/__stories__/TooltipContent.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const TooltipContent = () => {
-  return <div>Text</div>;
-};
-
-export default TooltipContent;
diff --git a/packages/core/src/components/Tooltip/__stories__/TooltipLineWrapper.jsx b/packages/core/src/components/Tooltip/__stories__/TooltipLineWrapper.jsx
deleted file mode 100644
index a6197191e4..0000000000
--- a/packages/core/src/components/Tooltip/__stories__/TooltipLineWrapper.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import cx from "classnames";
-import Tooltip from "../Tooltip";
-import TooltipContent from "./TooltipContent";
-import "./tooltip-story.scss";
-
-const SHOW_HIDE_TRIGGER = ["click"];
-
-const TooltipLineWrapper = ({ justify = "center", position = "top", theme = "dark" }) => {
-  const isBottom = position.indexOf("bottom") > -1;
-  return (
-    <div className="width-20">
-      <div style={{ paddingTop: "4px" }} />
-      <div style={{ width: "90px", height: "2px" }}>
-        <Tooltip
-          animationType="expand"
-          position={position}
-          justify={justify}
-          shouldShowOnMount
-          theme={theme}
-          content={<TooltipContent />}
-          showTrigger={SHOW_HIDE_TRIGGER}
-          hideTrigger={SHOW_HIDE_TRIGGER}
-        >
-          <div
-            className={cx("tooltip-empty-element", {
-              bottom: isBottom,
-              left: position === "left",
-              right: position === "right"
-            })}
-          />
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-TooltipLineWrapper.propTypes = {};
-TooltipLineWrapper.defaultProps = {};
-export default TooltipLineWrapper;
diff --git a/packages/core/src/components/Tooltip/__stories__/TooltipReference.jsx b/packages/core/src/components/Tooltip/__stories__/TooltipReference.jsx
deleted file mode 100644
index e2d8e25048..0000000000
--- a/packages/core/src/components/Tooltip/__stories__/TooltipReference.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import cx from "classnames";
-import "./TooltipReference.scss";
-
-const TooltipReference = () => {
-  return (
-    <div className={cx("tooltip-reference-container")}>
-      <div className="tooltip-reference-dot" />
-      <div className="tooltip-reference-dot" />
-      <div className="tooltip-reference-dot" />
-    </div>
-  );
-};
-
-export default TooltipReference;
diff --git a/packages/core/src/components/Tooltip/__stories__/TooltipReference.scss b/packages/core/src/components/Tooltip/__stories__/TooltipReference.scss
deleted file mode 100644
index af4f77f39c..0000000000
--- a/packages/core/src/components/Tooltip/__stories__/TooltipReference.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.tooltip-reference-container {
-  background-color: var(--sb-disabled-background-color);
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.15s ease-in;
-  &:hover {
-    background-color: var(--sb-primary-background-hover-color);
-  }
-  .tooltip-reference-dot {
-    background-color: var(--sb-inverted-color-background);
-    width: 6px;
-    height: 6px;
-    margin: 0 2px;
-    border-radius: 50%;
-  }
-}
diff --git a/packages/core/src/components/Tooltip/__stories__/assets/tooltip-image.png b/packages/core/src/components/Tooltip/__stories__/assets/tooltip-image.png
new file mode 100644
index 0000000000..92061c0161
Binary files /dev/null and b/packages/core/src/components/Tooltip/__stories__/assets/tooltip-image.png differ
diff --git a/packages/core/src/components/Tooltip/__stories__/tooltip-story.scss b/packages/core/src/components/Tooltip/__stories__/tooltip-story.scss
deleted file mode 100644
index de7ddb62ab..0000000000
--- a/packages/core/src/components/Tooltip/__stories__/tooltip-story.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.tooltip-empty-element {
-  &.bottom {
-    margin: 0 auto 48px 0;
-  }
-  &.right {
-    width: 1px;
-    height: 2px;
-    margin: 20px auto 0 0;
-  }
-  width: 89px;
-  height: 2px;
-  margin: 48px auto 0 0;
-}
-.width-20 {
-  width: 20%;
-  height: 80px;
-}
diff --git a/packages/core/src/components/Tooltip/__stories__/tooltip.mdx b/packages/core/src/components/Tooltip/__stories__/tooltip.mdx
index 32e029a8b0..ad1223e2fc 100644
--- a/packages/core/src/components/Tooltip/__stories__/tooltip.mdx
+++ b/packages/core/src/components/Tooltip/__stories__/tooltip.mdx
@@ -3,10 +3,15 @@ import { Canvas, Meta } from "@storybook/blocks";
 import { Bolt } from "../../Icon/Icons";
 import Icon from "../../Icon/Icon";
 import Button from "../../Button/Button";
+import TabList from "../../Tabs/TabList/TabList";
+import Tab from "../../Tabs/Tab/Tab";
+import Link from "../../Link/Link.tsx";
+import IconButton from "../../IconButton/IconButton";
 import { CHIP, LABEL, TIPSEEN } from "../../../storybook/components/related-components/component-description-map";
 import "./tooltip.stories.scss";
 import * as TooltipStories from "./tooltip.stories";
-import { TipOtherComponents } from "./tooltip.stories.helpers";
+import { TipOtherComponents, modifiers } from "./tooltip.stories.helpers";
+import image from "./assets/tooltip-image.png";
 
 <Meta of={TooltipStories} />
 
@@ -17,14 +22,14 @@ import { TipOtherComponents } from "./tooltip.stories.helpers";
 - [Usage](#usage)
 - [Variants](#variants)
 - [Themes](#themes)
-- [Do’s and don’ts](#dos-and-donts)
+- [Do's and don'ts](#dos-and-donts)
 - [Use cases and examples](#use-cases-and-examples)
 - [Related components](#related-components)
 - [Feedback](#feedback)
 
 ## Overview
 
-Tooltips show contextual help or information about specific components when a user hovers on them.
+Tooltips provide helpful information and can include detailed context about a specific component when a user hovers on it.
 
 <Canvas of={TooltipStories.Overview} />
 
@@ -36,8 +41,10 @@ Tooltips show contextual help or information about specific components when a us
 
 <UsageGuidelines
   guidelines={[
-    "Should never contain critical information that a user would absolutely need to proceed.",
-    "Use when the description content would be too much information to include inline or create too much clutter. For example, when expert users have seen it many times."
+    "Should never contain critical information that a user would definitely need to proceed.",
+    "Use when the description content would be too much information to include inline or create too much clutter. For example, when expert users have seen it many times.",
+    "Only show 1 tooltip at a time.",
+    "Whenever text is shortened and an ellipsis (...) appears, add a tooltip that contains the full version of the text."
   ]}
 />
 
@@ -45,40 +52,137 @@ Tooltips show contextual help or information about specific components when a us
 
 ## Variants
 
-### Positions
+### Tooltip with title
 
-Tooltip’s arrow can appear from top, bottom, left or right.
+Use tooltip with title when you want to present more complex content and you need to add a heading to emphasize the main idea. Titles can also come with an icon.
 
-<Canvas of={TooltipStories.Positions} />
+<Canvas of={TooltipStories.TooltipWithTitle} />
+
+### Tooltip with image
+
+Use tooltip with image to provide a preview for an image or when giving a closer look at a feature.
+
+<Canvas of={TooltipStories.TooltipWithImage} />
 
-### Themes
+### Positions
 
-Tooltip’s arrow can have various themes.
+Tooltip's arrow can appear from top, bottom, left or right.
 
-<Canvas of={TooltipStories.Themes} />
+<Canvas of={TooltipStories.Positions} />
 
-## Do’s and Don’ts
+## Do's and Don'ts
 
 <ComponentRules
   rules={[
     {
       positive: {
         component: (
-          <Tooltip shouldShowOnMount content="Open quick search  + B">
-            <div className="monday-storybook-tooltip_icon-box">
-              <Icon icon={Bolt} iconSize="32" />
-            </div>
+          <Tooltip shouldShowOnMount content="Quick search + B" modifiers={modifiers}>
+            <IconButton kind={IconButton.kinds.SECONDARY} icon={Bolt} iconSize="32" />
           </Tooltip>
         ),
-        description: "Use tooltips for adding alternative textual purpose for buttons which do not include any text."
+        description: "Use tooltips for interactive imagery."
       },
       negative: {
         component: (
-          <Tooltip shouldShowOnMount content="Open quick search  + B">
+          <Tooltip shouldShowOnMount content="Quick search + B" modifiers={modifiers}>
             <Button>Quick search</Button>
           </Tooltip>
         ),
-        description: "Don't use a tooltip to display information already written on the button text."
+        description: "Don't use tooltips to restate visible UI text."
+      }
+    },
+    {
+      positive: {
+        component: (
+          <TabList className="monday-storybook-tooltip_tabs">
+            <Tab>Boards</Tab>
+            <Tab>Items</Tab>
+          </TabList>
+        ),
+        description: "If an element doesn't need additional clarification, don't use a tooltip."
+      },
+      negative: {
+        component: (
+          <TabList className="monday-storybook-tooltip_tabs">
+            <Tooltip shouldShowOnMount content="Boards" position={Tooltip.positions.BOTTOM} modifiers={modifiers}>
+              <Tab>Boards</Tab>
+            </Tooltip>
+            <Tab>Items</Tab>
+          </TabList>
+        ),
+        description: "Don't use tooltips to restate text that is already displayed within the element."
+      }
+    },
+    {
+      positive: {
+        component: (
+          <Tooltip
+            shouldShowOnMount
+            withMaxWidth
+            title="I'm a rich tooltip"
+            modifiers={modifiers}
+            content={
+              <div>
+                I have a title, text, image and I can come{" "}
+                <Link text="with a link" inlineText className="monday-storybook-tooltip_link" />.
+              </div>
+            }
+          >
+            <div className="monday-storybook-tooltip_position-bottom" />
+          </Tooltip>
+        ),
+        description: "Add links inline and in the same color of the text."
+      },
+      negative: {
+        component: (
+          <Tooltip
+            shouldShowOnMount
+            withMaxWidth
+            title="I'm a rich tooltip"
+            modifiers={modifiers}
+            content={
+              <div>
+                I have a title, text, image and I can come with a link. <Link text="Read more" />
+              </div>
+            }
+          >
+            <div className="monday-storybook-tooltip_position-bottom" />
+          </Tooltip>
+        ),
+        description: "Don't add links on a separate line or in a different color from the text."
+      }
+    },
+    {
+      positive: {
+        component: (
+          <Tooltip
+            content="Empower users to visualize data."
+            withMaxWidth
+            shouldShowOnMount
+            image={image}
+            position={Tooltip.positions.RIGHT}
+            modifiers={modifiers}
+          >
+            <div className="monday-storybook-tooltip_position-left" />
+          </Tooltip>
+        ),
+        description: "Use this app to visualize data."
+      },
+      negative: {
+        component: (
+          <Tooltip
+            content="View our automation center."
+            withMaxWidth
+            shouldShowOnMount
+            image={image}
+            position={Tooltip.positions.RIGHT}
+            modifiers={modifiers}
+          >
+            <div className="monday-storybook-tooltip_position-left" />
+          </Tooltip>
+        ),
+        description: "Don't add an image just for aesthetic reasons, or if it doesn't help the user."
       }
     }
   ]}
diff --git a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.helpers.js b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.helpers.tsx
similarity index 83%
rename from packages/core/src/components/Tooltip/__stories__/tooltip.stories.helpers.js
rename to packages/core/src/components/Tooltip/__stories__/tooltip.stories.helpers.tsx
index ad2e65fcce..212e94a7e3 100644
--- a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.helpers.js
+++ b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.helpers.tsx
@@ -10,6 +10,7 @@ export const modifiers = [
   {
     name: "flip",
     options: {
+      // @ts-ignore
       fallbackPlacements: []
     }
   }
@@ -19,12 +20,12 @@ export const TipOtherComponents = () => (
   <Tip>
     As tooltips only surface from a hover, never include links or buttons in the copy. If your tooltip requires either
     of these, considers putting your content in a{" "}
-    <StorybookLink page="Popover/Tipseen" size={StorybookLink.sizes.SMALL}>
-      Tipseen
+    <StorybookLink page="Feedback/AttentionBox" size={StorybookLink.sizes.SMALL}>
+      Attention box
     </StorybookLink>{" "}
     or{" "}
-    <StorybookLink page="Feedback/AttentionBox" size={StorybookLink.sizes.SMALL}>
-      Attention box.
+    <StorybookLink page="Popover/Dialog" size={StorybookLink.sizes.SMALL}>
+      Dialog.
     </StorybookLink>
   </Tip>
 );
diff --git a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.js b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.js
deleted file mode 100644
index d8915f3136..0000000000
--- a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import Tooltip from "../Tooltip";
-import { capitalize } from "lodash-es";
-import TooltipReference from "./TooltipReference";
-import { Hide, Subitems } from "../../Icon/Icons";
-import Icon from "../../Icon/Icon";
-import { modifiers } from "./tooltip.stories.helpers";
-import { TooltipTheme } from "../TooltipConstants";
-import "./tooltip.stories.scss";
-
-export default {
-  title: "Popover/Tooltip",
-  component: Tooltip
-};
-
-const tooltipTemplate = args => {
-  return (
-    <div className="monday-storybook-tooltip_overview">
-      <Tooltip
-        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-        // Therefore, there is no need to move this prop in your implementations.
-        modifiers={modifiers}
-        withMaxWidth
-        {...args}
-      >
-        <div />
-      </Tooltip>
-    </div>
-  );
-};
-
-export const Overview = {
-  render: tooltipTemplate.bind({}),
-  name: "Overview",
-
-  args: {
-    shouldShowOnMount: true,
-    content: "I'm a tooltip"
-  },
-
-  parameters: {
-    chromatic: {
-      pauseAnimationAtEnd: true
-    }
-  }
-};
-
-export const Positions = {
-  // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
-  render:
-    // Therefore, there is no need to move this prop in your implementations.
-    () => {
-      return (
-        <>
-          <div className="monday-storybook-tooltip_top">
-            <Tooltip
-              modifiers={modifiers}
-              content="Top"
-              shouldShowOnMount
-              position={Tooltip.positions.BOTTOM}
-              animationType={Tooltip.animationTypes.EXPAND}
-              withMaxWidth
-            >
-              <div />
-            </Tooltip>
-          </div>
-          <div className="monday-storybook-tooltip_bottom">
-            <Tooltip modifiers={modifiers} content="Bottom" shouldShowOnMount animationType="expand" maxWidth>
-              <div />
-            </Tooltip>
-          </div>
-          <div className="monday-storybook-tooltip_right">
-            <Tooltip
-              modifiers={modifiers}
-              content="Left"
-              position={Tooltip.positions.RIGHT}
-              shouldShowOnMount
-              animationType={Tooltip.animationTypes.EXPAND}
-              withMaxWidth
-            >
-              <div />
-            </Tooltip>
-          </div>
-          <div className="monday-storybook-tooltip_left">
-            <Tooltip
-              modifiers={modifiers}
-              content="Right"
-              position={Tooltip.positions.LEFT}
-              shouldShowOnMount
-              animationType={Tooltip.animationTypes.EXPAND}
-              withMaxWidth
-            >
-              <div />
-            </Tooltip>
-          </div>
-        </>
-      );
-    },
-
-  name: "Positions",
-
-  parameters: {
-    chromatic: {
-      pauseAnimationAtEnd: true
-    }
-  }
-};
-
-export const Themes = {
-  render: () =>
-    Object.values(TooltipTheme).map(theme => (
-      <div className="monday-storybook-tooltip_top" key={theme}>
-        <Tooltip
-          modifiers={modifiers}
-          content={capitalize(theme)}
-          shouldShowOnMount
-          position={Tooltip.positions.BOTTOM}
-          animationType={Tooltip.animationTypes.EXPAND}
-          theme={theme}
-          withMaxWidth
-        >
-          <div />
-        </Tooltip>
-      </div>
-    )),
-
-  name: "Themes"
-};
-
-export const IconTooltip = {
-  render: () => (
-    <div className="monday-storybook-tooltip_box">
-      <Tooltip content="Hidden columns" withMaxWidth>
-        <div className="monday-storybook-tooltip_icon-wrapper">
-          <Icon icon={Hide} />
-        </div>
-      </Tooltip>
-    </div>
-  ),
-
-  name: "Icon tooltip"
-};
-
-export const DefinitionTooltip = {
-  render: () => (
-    <div className="monday-storybook-tooltip_box">
-      <Tooltip content="Item name: Bottom sheets" withMaxWidth>
-        <div className="monday-storybook-tooltip_icon-wrapper">
-          <Icon icon={Subitems} />
-          <span>Subitem</span>
-        </div>
-      </Tooltip>
-    </div>
-  ),
-
-  name: "Definition tooltip"
-};
-
-export const ImmediateTooltips = {
-  render: () => (
-    <div className="monday-storybook-tooltip_box">
-      <Tooltip immediateShowDelay={0} content="I'm a tooltip" withMaxWidth>
-        <TooltipReference />
-      </Tooltip>
-      <Tooltip immediateShowDelay={0} content="I'm a tooltip" withMaxWidth>
-        <TooltipReference />
-      </Tooltip>
-      <Tooltip content="I'm a tooltip" withMaxWidth>
-        <TooltipReference />
-      </Tooltip>
-    </div>
-  ),
-
-  name: "Immediate tooltips"
-};
diff --git a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.scss b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.scss
index 3b3627abc9..da53290c72 100644
--- a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.scss
+++ b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.scss
@@ -5,45 +5,65 @@
     gap: 16px;
   }
 
-  &_icon-wrapper {
+  &_title {
+    padding: 30px 0;
     display: flex;
-    padding: 6px;
-    gap: 8px;
-    align-items: center;
-    background-color: var(--sb-disabled-background-color);
-    cursor: pointer;
-    &:hover {
-      background-color: var(--sb-primary-background-hover-color);
-    }
   }
 
-  &_icon-box {
-    background-color: var(--sb-color-winter);
-    width: 54px;
-    height: 54px;
+  &_image {
+    padding: 120px 0;
     display: flex;
-    align-items: center;
-    justify-content: center;
+
+    &__tooltip > img {
+      min-height: 135px;
+    }
   }
 
-  &_top {
-    padding: 0 64px 68px 0;
-    margin: 0 32px;
+  &_tabs {
+    ul,
+    li {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  &_position-left {
+    position: relative;
+    left: -25%;
   }
 
-  &_bottom {
-    padding: 50px 0 0 0;
-    margin: 0 32px;
+  &_link {
+    color: var(--text-color-on-primary);
+    text-decoration: underline;
   }
 
-  &_left {
-    padding: 0 64px 8px 64px;
-    margin: 0 64px;
+  &_position-bottom {
+    position: relative;
+    top: 25%;
   }
 
-  &_right {
-    padding: 0 32px 8px 32px;
-    margin: 0 32px;
+  &_positions {
+    display: flex;
+    align-items: center;
+
+    > :nth-child(1) {
+      padding: 0 64px 68px 0;
+      margin: 0 32px;
+    }
+
+    > :nth-child(2) {
+      padding: 50px 0 0 0;
+      margin: 0 32px;
+    }
+    > :nth-child(3) {
+      padding: 0 32px 8px 32px;
+      margin: 0 32px;
+    }
+
+    > :nth-child(4) {
+      padding: 0 64px 8px 64px;
+      margin: 0 64px;
+    }
   }
 
   &_overview {
diff --git a/packages/core/src/components/Tooltip/__stories__/tooltip.stories.tsx b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.tsx
new file mode 100644
index 0000000000..5b2814543a
--- /dev/null
+++ b/packages/core/src/components/Tooltip/__stories__/tooltip.stories.tsx
@@ -0,0 +1,166 @@
+import Tooltip, { TooltipProps } from "../Tooltip";
+import { Hide, Menu, Subitems } from "../../Icon/Icons";
+import Button from "../../Button/Button";
+import Flex from "../../Flex/Flex";
+import IconButton from "../../IconButton/IconButton";
+import { modifiers } from "./tooltip.stories.helpers";
+import "./tooltip.stories.scss";
+import image from "./assets/tooltip-image.png";
+import { createStoryMetaSettingsDecorator } from "../../../storybook";
+
+const metaSettings = createStoryMetaSettingsDecorator({
+  component: Tooltip,
+  iconPropNamesArray: ["icon"]
+});
+
+export default {
+  title: "Popover/Tooltip",
+  component: Tooltip,
+  argTypes: metaSettings.argTypes,
+  decorators: metaSettings.decorators
+};
+
+const tooltipTemplate = (args: TooltipProps) => {
+  return (
+    <div className="monday-storybook-tooltip_overview">
+      <Tooltip
+        // The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
+        // Therefore, there is no need to move this prop in your implementations.
+        modifiers={modifiers}
+        withMaxWidth
+        {...args}
+      >
+        <div />
+      </Tooltip>
+    </div>
+  );
+};
+
+export const Overview = {
+  render: tooltipTemplate.bind({}),
+  name: "Overview",
+  args: {
+    shouldShowOnMount: true,
+    content: "I'm a tooltip"
+  },
+  parameters: {
+    chromatic: {
+      pauseAnimationAtEnd: true
+    }
+  }
+};
+
+export const TooltipWithTitle = () => (
+  <div className="monday-storybook-tooltip_title">
+    <Tooltip
+      content="Hidden columns"
+      title="Tooltip title"
+      withMaxWidth
+      shouldShowOnMount
+      position={Tooltip.positions.RIGHT}
+      modifiers={modifiers}
+    >
+      <div />
+    </Tooltip>
+  </div>
+);
+
+export const TooltipWithImage = () => (
+  <div className="monday-storybook-tooltip_image">
+    <Tooltip
+      content="Max width tooltip with a long text example"
+      title="Tooltip title"
+      withMaxWidth
+      shouldShowOnMount
+      image={image}
+      position={Tooltip.positions.RIGHT}
+      modifiers={modifiers}
+      className="monday-storybook-tooltip_image__tooltip"
+    >
+      <div />
+    </Tooltip>
+  </div>
+);
+
+export const Positions = {
+  render: () => {
+    return (
+      <div className="monday-storybook-tooltip_positions">
+        <div>
+          {/* The modifier's purpose is to prevent the tipseen from being displayed when the user scrolls the story upwards / downwards.
+         Therefore, there is no need to move this prop in your implementations. */}
+          <Tooltip
+            modifiers={modifiers}
+            content="Top"
+            shouldShowOnMount
+            position={Tooltip.positions.BOTTOM}
+            withMaxWidth
+          >
+            <div />
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip modifiers={modifiers} content="Bottom" shouldShowOnMount withMaxWidth>
+            <div />
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip
+            modifiers={modifiers}
+            content="Left"
+            position={Tooltip.positions.RIGHT}
+            shouldShowOnMount
+            withMaxWidth
+          >
+            <div />
+          </Tooltip>
+        </div>
+        <div>
+          <Tooltip
+            modifiers={modifiers}
+            content="Right"
+            position={Tooltip.positions.LEFT}
+            shouldShowOnMount
+            withMaxWidth
+          >
+            <div />
+          </Tooltip>
+        </div>
+      </div>
+    );
+  },
+  name: "Positions",
+  parameters: {
+    chromatic: {
+      pauseAnimationAtEnd: true
+    }
+  }
+};
+
+export const IconTooltip = () => (
+  <Tooltip content="Hidden columns" withMaxWidth modifiers={modifiers}>
+    <IconButton kind={IconButton.kinds.SECONDARY} size={IconButton.sizes.SMALL} icon={Hide} />
+  </Tooltip>
+);
+
+export const DefinitionTooltip = () => (
+  <Tooltip content="Item name: Bottom sheets" withMaxWidth modifiers={modifiers}>
+    <Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} leftIcon={Subitems}>
+      Subitem
+    </Button>
+  </Tooltip>
+);
+
+export const ImmediateTooltips = () => (
+  <Flex gap={Flex.gaps.SMALL}>
+    <Tooltip immediateShowDelay={0} content="I'm a tooltip" withMaxWidth>
+      <IconButton icon={Menu} kind={IconButton.kinds.SECONDARY} size={IconButton.sizes.SMALL} />
+    </Tooltip>
+    <Tooltip immediateShowDelay={0} content="I'm a tooltip" withMaxWidth>
+      <IconButton icon={Menu} kind={IconButton.kinds.SECONDARY} size={IconButton.sizes.SMALL} />
+    </Tooltip>
+    <Tooltip content="I'm a tooltip" withMaxWidth>
+      <IconButton icon={Menu} kind={IconButton.kinds.SECONDARY} size={IconButton.sizes.SMALL} />
+    </Tooltip>
+  </Flex>
+);
diff --git a/packages/core/src/storybook/components/related-components/descriptions/tooltip-description.jsx b/packages/core/src/storybook/components/related-components/descriptions/tooltip-description.jsx
index 792aa64b86..c849f111ff 100644
--- a/packages/core/src/storybook/components/related-components/descriptions/tooltip-description.jsx
+++ b/packages/core/src/storybook/components/related-components/descriptions/tooltip-description.jsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { RelatedComponent } from "vibe-storybook-components";
-import TooltipLineWrapper from "../../../../components/Tooltip/__stories__/TooltipLineWrapper";
+import Tooltip from "../../../../components/Tooltip/Tooltip";
 
 export const TooltipDescription = () => {
   const component = useMemo(() => {
@@ -9,7 +9,9 @@ export const TooltipDescription = () => {
     };
     return (
       <div style={style}>
-        <TooltipLineWrapper justify="end" />
+        <Tooltip shouldShowOnMount content="Text">
+          <div />
+        </Tooltip>
       </div>
     );
   }, []);
diff --git a/packages/storybook-blocks/src/styles/tokens/colors.scss b/packages/storybook-blocks/src/styles/tokens/colors.scss
index 43a1d31f5c..67c37612d2 100644
--- a/packages/storybook-blocks/src/styles/tokens/colors.scss
+++ b/packages/storybook-blocks/src/styles/tokens/colors.scss
@@ -26,7 +26,7 @@
   --sb-text-color-fixed-dark: #323338;
   --sb-inverted-color-background: #323338;
   --sb-disabled-background-color: #ecedf5;
-  --sb-primary-background-hover-color: #dcdfec;
+  --sb-primary-background-hover-color: rgba(103, 104, 121, 0.1);
   --sb-dark-background-color: #f6f7fb;
   --sb-brand-color: #5034ff;
 }