Customize arrow for tooltip and popover border

[nandcello]

Say I wanna add a black border around the whole tooltip, including the arrow. I tried adding a solid 1px black border like so:
https://codesandbox.io/s/funny-mclaren-ltvsy?file=/App.js

but it also has a line underneath the triangle. How do I get rid of the line so the border only outlines the tooltip including the arrow?

[benoitgrelard]

HI @ninom,

The main issue with your sandbox is that you're using border on the arrow which is an SVG so it expects stroke rather.
However, getting a seamless solid border around the whole thing is quite tricky but doable.
You could use filter: drop-shadow but that's limited as you can't get it quite solid but rather blurry like a shadow.

Here's an old sandbox (not the latest version of primitives) which shows you how you might do it with a custom arrow:
https://codesandbox.io/s/popover-seamless-arrow-qtgf5?file=/src/App.js

Let me know if that helps!

[benoitgrelard]

You can use whatever SVG you want, that demo is just an example, so if you find the one from reakit easier to use, you can use that SVG.

[vnugent]

Arrow component no longer accepts as prop. Any ideas how to do this in the current version? Thanks!

[joaom00]

@vnugent You can use the asChild prop

[vincerubinetti]

I ended up using this, since I just wanted a blur/shadow:

.arrow {
  filter: drop-shadow(0 0 3px black);
}

.content[data-side="top"] .arrow {
  clip-path: inset(0 -10px -10px -10px);
}

The clip-path will probably be useful to people, to cutoff the unsightly-ness at the top here:

[ADTC]

Thank you @vincerubinetti I used this for popover arrow:

.popoverArrow {
  fill: white;
  // Add a shadow behind the arrow to create a 3D effect.
  filter: drop-shadow(0 0 3px gray);
  // Hide the shadow which overlaps the content above the arrow.
  clip-path: inset(0 -10px -10px -10px);
}

// inside Popover.Content:
<Popover.Arrow className={Styles.popoverArrow} />

[hmaack]

In case, someone is using reka with tailwind can use this approach (reka 2.5)

<TooltipArrow
    :width="20"
    :height="10"
    class="fill-current text-red stroke-[#eaf701] stroke-2"
 />