fix(Tooltip, Popover): allow styling target wrapper

src/__private_stories__/tooltip-scenarios-story.tsx

@@ -1,5 +1,18 @@
 import * as React from 'react';
-import {Stack, Text3, Tooltip, Placeholder, IconShopRegular, Title3} from '..';
+import {
+    Stack,
+    Text3,
+    Tooltip,
+    Placeholder,
+    IconShopRegular,
+    Title3,
+    Grid,
+    GridItem,
+    SnapCard,
+    Circle,
+    IconAcademicRegular,
+} from '..';
+import {vars} from '../skins/skin-contract.css';
 
 export default {
     title: 'Private/Tooltip',
@@ -142,3 +155,61 @@ export const MultipleTooltips: StoryComponent = () => {
 };
 
 MultipleTooltips.storyName = 'Multiple tooltips';
+
+export const WithTargetStyles: StoryComponent = () => {
+    return (
+        <Stack space={16}>
+            <Stack space={8}>
+                <Title3>Tooltip with custom CSS styles for the target wrapper</Title3>
+                <Text3 regular as="p">
+                    Sometimes you may need to style the element that wraps the target content. You can use the
+                    targetStyle prop for this.
+                </Text3>
+            </Stack>
+            <Grid columns={2} gap={8}>
+                <GridItem>
+                    <Tooltip
+                        targetStyle={{height: '100%'}}
+                        position="bottom"
+                        target={
+                            <SnapCard
+                                dataAttributes={{testid: 'target-0'}}
+                                asset={
+                                    <Circle size={40} backgroundColor={vars.colors.brandLow}>
+                                        <IconAcademicRegular color={vars.colors.brand} />
+                                    </Circle>
+                                }
+                                description="Description description description description description description description description description description description description description description description description description description description description"
+                                title="Title"
+                            />
+                        }
+                        title="Title"
+                        description="Description"
+                    />
+                </GridItem>
+                <GridItem>
+                    <Tooltip
+                        targetStyle={{height: '100%'}}
+                        position="bottom"
+                        target={
+                            <SnapCard
+                                dataAttributes={{testid: 'target-1'}}
+                                asset={
+                                    <Circle size={40} backgroundColor={vars.colors.brandLow}>
+                                        <IconAcademicRegular color={vars.colors.brand} />
+                                    </Circle>
+                                }
+                                title="Title"
+                                description="Description"
+                            />
+                        }
+                        title="Title"
+                        description="Description"
+                    />
+                </GridItem>
+            </Grid>
+        </Stack>
+    );
+};
+
+WithTargetStyles.storyName = 'With custom styles for target';

src/__screenshot_tests__/tooltip-screenshot-test.tsx

@@ -122,6 +122,26 @@ test('Tooltip - active tooltip is closed if another one is opened', async () =>
     expect(thirdTooltip).toMatchImageSnapshot();
 });
 
+test('Tooltip - with targetStyle', async () => {
+    const page = await openStoryPage({
+        id: 'private-tooltip--with-target-styles',
+        device: 'DESKTOP',
+    });
+
+    const noOpenTooltip = await page.screenshot();
+    expect(noOpenTooltip).toMatchImageSnapshot();
+
+    await page.click(await screen.findByTestId('target-0'));
+
+    const firstTooltip = await page.screenshot();
+    expect(firstTooltip).toMatchImageSnapshot();
+
+    await page.click(await screen.findByTestId('target-1'));
+
+    const secondTooltip = await page.screenshot();
+    expect(secondTooltip).toMatchImageSnapshot();
+});
+
 /**
  * when using Vivo_new skin, the tooltip border radius is bigger than in other skins, so it's useful
  * to check that the tooltip's arrow is displayed properly in this scenario.

src/popover.tsx

@@ -16,6 +16,7 @@ type Position = 'top' | 'bottom' | 'left' | 'right';
 type Props = {
     description?: string;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     title?: string;
     asset?: React.ReactNode;
     onClose?: () => void;

src/tooltip.tsx

@@ -135,6 +135,7 @@ type Props = {
     extra?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     title?: string;
     position?: Position;
     width?: number;
@@ -147,6 +148,7 @@ type Props = {
 type BaseTooltipProps = {
     content?: React.ReactNode;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     position?: Position;
     width?: number;
     delay?: boolean;
@@ -162,6 +164,7 @@ type BaseTooltipProps = {
 export const BaseTooltip = ({
     content,
     target,
+    targetStyle,
     width,
     position = 'top',
     dataAttributes,
@@ -445,6 +448,7 @@ export const BaseTooltip = ({
         <>
             {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
+                style={targetStyle}
                 ref={(element) => {
                     /**
                      * Hack to set the target ref to the target element that was actually passed as prop.