Open carolvalenca opened 3 weeks ago
oii @carolvalenca, o Tooltip utiliza a referência pra posicionar o popover, por isso é necessário utilizar um forwardRef
ao criar o custom component
https://codesandbox.io/p/sandbox/6s4hp5
em typescript ficaria assim
import { Button } from "@vtex/shoreline";
import "@vtex/shoreline/css";
import { Ref, forwardRef } from "react";
const CustomButton = forwardRef(function CustomButton(props: ButtonProps, ref: Ref<HTMLButtonElement>) {
return (
<Button {...props} ref={ref}>
Custom button imported from another file
</Button>
);
});
export default CustomButton;
@carolvalenca A resposta de lucas responde seu problema?
Problem
Utilizando o componente Tooltip recentemente notei que quando o componente encapsulado no Tooltip é customizado (importado de outro arquivo ou até mesmo estando no mesmo arquivo mas sendo separado em outra função), o Tooltip não aparece.
Expected behavior
Quando houver o hover em um componente encapsulado no Tooltip, o Tooltip é mostrado em tela.
Reproducible Example
https://codesandbox.io/p/sandbox/6s4hp5
Suggested solution
No response
Additional context
Estou utilizando localmente a versão 1.5.0 do
@vtex/shoreline
e no snippet do CodeSandbox a versão 1.9.10. Em ambas versões o erro acontece.Package
@vtex/shoreline
Packages version
No response
Browser
Chrome
Package Manager
pnpm