feat: allow to add custom classes to tip

Signed-off-by: lstocchi <[email protected]>

packages/ui/src/lib/tooltip/Tooltip.spec.ts

@@ -35,6 +35,14 @@ test('Expect basic styling', async () => {
  expect(element).toHaveClass('text-white');
 });
 
+test('Expect custom tip styling', async () => {
+ render(Tooltip, { tip, tipClass: 'text-pretty w-64' });
+
+ const element = screen.getByLabelText('tooltip');
+ expect(element).toBeInTheDocument();
+ expect(element.parentElement).toHaveClass('text-pretty w-64');
+});
+
 function createTest(props: Record<string, boolean>, locationName: string, expectedStyle = locationName): void {
  test(`Expect property ${locationName} to add ${expectedStyle} class to parent element`, () => {
  render(Tooltip, { tip, ...props });

packages/ui/src/lib/tooltip/Tooltip.svelte

@@ -59,14 +59,15 @@ export let bottom = false;
 export let bottomLeft = false;
 export let bottomRight = false;
 export let left = false;
+export let tipClass = '';
 </script>
 
 <div class="relative inline-block">
  <span class="group tooltip-slot {$$props.class}">
  <slot />
  </span>
  <div
- class="whitespace-nowrap absolute tooltip opacity-0 inline-block transition-opacity duration-150 ease-in-out pointer-events-none z-[10]"
+ class="whitespace-nowrap absolute tooltip opacity-0 inline-block transition-opacity duration-150 ease-in-out pointer-events-none z-[10] {tipClass}"
  class:left="{left}"
  class:right="{right}"
  class:bottom="{bottom}"