fix(Tooltip, Popover): allow styling target wrapper (#1262)

Issue: [Link](https://jira.tid.es/browse/WEB-2066)

More context about the issue:
[Link](https://teams.microsoft.com/l/message/19:68854aea147e4787803aff0e380e1208@thread.tacv2/1728303126078?tenantId=9744600e-3e04-492e-baa1-25ec245c6f10&groupId=e265fe99-929f-45d1-8154-699649674a40&parentMessageId=1728303126078&teamName=M%C3%ADstica&channelName=Help&createdTime=1728303126078&allowXTenantAccess=false)

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

@@ -15,6 +15,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

@@ -134,6 +134,7 @@ type Props = {
     extra?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     title?: string;
     position?: Position;
     width?: number;
@@ -146,6 +147,7 @@ type Props = {
 type BaseTooltipProps = {
     content?: React.ReactNode;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     position?: Position;
     width?: number;
     delay?: boolean;
@@ -161,6 +163,7 @@ type BaseTooltipProps = {
 export const BaseTooltip = ({
     content,
     target,
+    targetStyle,
     width,
     position = 'top',
     dataAttributes,
@@ -444,6 +447,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.