feat(AVO-4043): add params to tooltip to style arrow triangle

src/components/MultiRange/MultiRange.stories.tsx

@@ -58,4 +58,4 @@ export const MultiRangeSingleValue: Story = {
 export const MultiRangeWithNumberField: Story = {
 	args: { values: [20], showNumber: true },
 	render: Template,
-};
+};

src/components/Table/Table.tsx

@@ -165,10 +165,7 @@ const Table = <RowDataType extends TableData>({
 										key={row.id}
 									>
 										{enableRowFocusOnClick && (
-											<td
-												role="cell"
-												className={focusedTdClass(row.id === focusedRowId)}
-											>
+											<td role="cell" className={focusedTdClass(row.id === focusedRowId)}>
 												<button
 													type="button"
 													aria-label="Focus row"

src/components/Tooltip/Tooltip.scss

@@ -8,14 +8,3 @@
 	display: inline-block;
 }
 
-.c-tooltip-component {
-	position: absolute;
-	max-width: 48rem;
-	user-select: none;
-	visibility: hidden;
-	z-index: 75;
-}
-
-.c-tooltip-component--show {
-	visibility: visible;
-}

src/components/Tooltip/Tooltip.slots.tsx

@@ -1,4 +1,4 @@
 import type { FC, ReactNode } from 'react';
 
-export const TooltipContent: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;
 export const TooltipTrigger: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;
+export const TooltipContent: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;

src/components/Tooltip/Tooltip.stories.tsx

@@ -156,3 +156,24 @@ export const TooltipDynamicPosition: Story = {
 		</div>
 	),
 };
+
+export const TooltipStyling: Story = {
+	render: () => (
+		<div className="u-text-center" style={{ paddingTop: '200px', paddingLeft: '200px' }}>
+			<Tooltip
+				position="top"
+				arrowFillColor="yellow"
+				arrowStrokeColor="red"
+				arrowStrokeWidth={2}
+				style={{ backgroundColor: 'yellow', border: '2px solid red', padding: '10px' }}
+			>
+				<TooltipTrigger>
+					<span>Hover me!</span>
+				</TooltipTrigger>
+				<TooltipContent>
+					<span>This is a tooltip</span>
+				</TooltipContent>
+			</Tooltip>
+		</div>
+	),
+};

src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,11 @@
 import clsx from 'clsx';
-import { type FunctionComponent, type ReactNode, useRef, useState } from 'react';
+import {
+	type CSSProperties,
+	type FunctionComponent,
+	type ReactNode,
+	useRef,
+	useState,
+} from 'react';
 
 import { useSlot } from '../../hooks/use-slot';
 import { generateRandomId } from '../../utils/generate-random-id/generate-random-id';
@@ -25,19 +31,27 @@ interface TooltipPropsSchema {
 	position: Placement;
 	offset?: number;
 	contentClassName?: string;
+	style?: CSSProperties;
+	arrowFillColor?: string; // https://floating-ui.com/docs/floatingarrow#fill
+	arrowStrokeColor?: string; // https://floating-ui.com/docs/floatingarrow#stroke
+	arrowStrokeWidth?: number; // https://floating-ui.com/docs/FloatingArrow#strokewidth
 }
 
 const Tooltip: FunctionComponent<TooltipPropsSchema> = ({
 	children,
 	position = 'top',
 	offset = 10,
 	contentClassName,
+	style,
+	arrowFillColor = '#FFF',
+	arrowStrokeColor,
+	arrowStrokeWidth = 0,
 }) => {
 	const [show, setShow] = useState(false);
 	const [id] = useState(generateRandomId());
 
-	const tooltipSlot = useSlot(TooltipContent, children);
-	const triggerSlot = useSlot(TooltipTrigger, children);
+	const triggerElement = useSlot(TooltipTrigger, children);
+	const contentElement = useSlot(TooltipContent, children);
 	const arrowRef = useRef(null);
 
 	const { refs, floatingStyles, context } = useFloating({
@@ -67,39 +81,39 @@ const Tooltip: FunctionComponent<TooltipPropsSchema> = ({
 		click,
 	]);
 
-	return tooltipSlot && triggerSlot ? (
+	return contentElement && triggerElement ? (
 		<>
 			<div
 				className="c-tooltip-component-trigger"
 				data-id={id}
 				ref={refs.setReference}
 				{...getReferenceProps()}
 			>
-				{triggerSlot}
+				{triggerElement}
 			</div>
 
-			<div
-				className={clsx(
-					contentClassName,
-					'c-tooltip-component',
-					`c-tooltip-component--${position}`,
-					{
-						'c-tooltip-component--show': show,
-					}
-				)}
-				ref={refs.setFloating}
-				style={floatingStyles}
-				{...getFloatingProps()}
-			>
-				{tooltipSlot}
-				<FloatingArrow
-					ref={arrowRef}
-					context={context}
-					className="c-tooltip-component__arrow"
-					fill="green"
-					stroke="red"
-				/>
-			</div>
+			{show && (
+				<div
+					className={clsx(
+						contentClassName,
+						'c-tooltip-component',
+						`c-tooltip-component--${position}`
+					)}
+					ref={refs.setFloating}
+					style={{ ...floatingStyles, ...style }}
+					{...getFloatingProps()}
+				>
+					{contentElement}
+					<FloatingArrow
+						ref={arrowRef}
+						context={context}
+						className="c-tooltip-component__arrow"
+						fill={arrowFillColor}
+						stroke={arrowStrokeColor}
+						strokeWidth={arrowStrokeWidth}
+					/>
+				</div>
+			)}
 		</>
 	) : null;
 };