Enhance Tooltip Components: Simple and Complex

Author: Kubit

src/components/tooltip/stories/tooltip.stories.tsx

@@ -49,6 +49,44 @@ export const Tooltip: Story = {
   },
 };
 
+export const TooltipSimple: Story = {
+  args: {
+    variant: Object.values(variantsObject[themeSelected].TooltipVariantType || {})[0] as string,
+    title: { content: 'Tootltip title' },
+    content: {
+      content: (
+        <div style={{ color: '#fff' }}>
+          <div>content first line</div>
+        </div>
+      ),
+    },
+    children: 'Hover me',
+    align: TooltipAlignType.TOP,
+    tooltipAsModal: false,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.TOOLTIP],
+  },
+};
+
+export const TooltipComplex: Story = {
+  args: {
+    variant: Object.values(variantsObject[themeSelected].TooltipVariantType || {})[0] as string,
+    title: { content: 'Tootltip title' },
+    content: {
+      content: (
+        <div style={{ color: '#fff' }}>
+          <div>content first line</div>
+          <div>content second line</div>
+        </div>
+      ),
+    },
+    children: 'Hover me',
+    align: TooltipAlignType.TOP,
+    closeIcon: { icon: ICONS.ICON_PLACEHOLDER, altText: 'Close icon' },
+    tooltipAsModal: true,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.TOOLTIP],
+  },
+};
+
 export const TooltipWithCtv: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].TooltipVariantType || {})[0] as string,

src/components/tooltip/tooltipStandAlone.tsx

@@ -59,7 +59,8 @@ const TooltipStandAlone = ({
   const Tooltip = (
     <TooltipExternalContainerStyled
       ref={props.tooltipRef}
-      aria-label={props.tooltipAsModal ? props.tooltipAriaLabel : undefined}
+      aria-label={props.tooltipAriaLabel}
+      aria-labelledby={titleId}
       as={getHtmlTagForTooltip({
         mediaDevice: props.mediaDevice,
         tooltipAsModal: props.tooltipAsModal,
@@ -107,7 +108,7 @@ const TooltipStandAlone = ({
               styles={props.styles}
             >
               <Text
-                component={TextComponentType.SPAN}
+                component={TextComponentType.H2}
                 customTypography={props.styles?.title}
                 dataTestId={`${props.dataTestId}TooltipContentTitle`}
                 variant={props.styles.title?.font_variant}

src/components/tooltip/tooltipUnControlled.tsx

@@ -151,7 +151,7 @@ const TooltipUnControlledComponent = React.forwardRef(
         mediaDevice={mediaDevice}
         popoverOpen={open}
         styles={styles}
-        tooltipAriaLabel={tooltipAriaLabel ?? helpAriaLabel}
+        tooltipAriaLabel={tooltipAriaLabel}
         tooltipAsModal={tooltipAsModalValue}
         tooltipRef={tooltipRef}
         onBlur={handleBlur}