Open Ladvace opened 1 year ago
I had the same issue. I just overwrote the middleware so it takes an accessor instead
const solidArrow = ({
element,
padding,
}: {
element: Accessor<HTMLElement>;
padding: Padding | undefined;
}): Middleware => ({
name: "arrow",
fn(...args) {
return arrow({
element: element(),
padding: padding,
}).fn(...args);
},
});
so something like this works nicely:
let referenceRef: HTMLElement;
let tooltipRef: HTMLDivElement;
let tooltipArrow: HTMLDivElement;
const position = useFloating(
() => referenceRef,
() => tooltipRef,
{
placement: "bottom",
whileElementsMounted: autoUpdate,
middleware: [
flip(),
offset(floatingOffset()),
solidArrow({
element: () => tooltipArrow,
padding: 8,
}),
],
}
);
I was trying to make a tooltip with an arrow, the problem is that
arrowRef
do not get updated inarrow
, is there a way to work around it? what I did to workaround this was to reassignuseFloating
witharrowRef
in a createEffect but this is not really the optimal solution