feat(Tooltip): Rich tooltip

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;
 }

packages/core/src/components/Tooltip/Tooltip.module.scss

@@ -4,9 +4,7 @@ $tooltip-z-index: 9999999999999999;
 
 .tooltip {
   position: relative;
-  display: inline-block;
   border-radius: var(--tooltip-border-radius, var(--border-radius-small));
-  padding: var(--tooltip-padding, #{var(--spacing-small) var(--spacing-medium)});
   box-shadow: var(--box-shadow-medium);
   @include font-input();
   max-width: var(--tooltip-max-width, 50vw);
@@ -15,12 +13,34 @@ $tooltip-z-index: 9999999999999999;
   &.withMaxWidth {
     --tooltip-max-width: 240px;
   }
-}
 
-.tooltip.paddingSizeMd {
-  border-radius: var(--border-radius-medium);
-  padding: var(--spacing-medium);
-  @include font-input();
+  .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 {
+    display: inline-block;
+    padding: var(--tooltip-padding, #{var(--spacing-small) var(--spacing-medium)});
+
+    &.paddingSizeMd {
+      border-radius: var(--border-radius-medium);
+      padding: var(--spacing-medium);
+      @include font-input();
+    }
+  }
 }
 
 .tooltip a.tooltipWhiteLink {

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;
@@ -198,12 +213,20 @@ export default class Tooltip extends PureComponent<TooltipProps> {
         className={cx(
           styles.tooltip,
           getStyle(styles, camelCase(theme)),
-          getStyle(styles, camelCase("padding-size-" + paddingSize)),
           { [styles.withMaxWidth]: withMaxWidth },
           className
         )}
       >
-        {contentValue}
+        {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>
     );
   }