- Uso
- Propriedades
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
export const MyComponent = () => {
return (
<>
<p id="hoverText" style={{ display: "inline-block" }}>
Customer Insights
</p>
<AppTooltip
className
anchorSelect="#hoverText"
content="Explore customer behavior and preferences"
delayHide={0}
offset={6}
noArrow={false}
isOpen={true}
place="bottom"
positionStrategy="absolute"
/>
</>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| className | string | Classe CSS opcional para estilização adicional. |
| anchorSelect | Seleção CSS | Seletor para o âncora da dica (o elemento que aciona a dica) |
| conteúdo | string | O conteúdo que deseja exibir na dica |
| delayHide | número | O atraso em segundos antes de ocultar a dica após o cursor deixar a âncora. |
| offset | número | O deslocamento em pixels para posicionar a dica. |
| noArrow | booleano | Se true, oculta a seta na dica. |
| isOpen | booleano | Se true, a dica está aberta por padrão. |
| local | string PlacesType de react-tooltip | Especifica o posicionamento da dica. Os valores incluem bottom, left, right, top, top-start, top-end, right-start, right-end, bottom-start, bottom-end, left-start, e left-end. |
| positionStrategy | string PositionStrategy de react-tooltip | Estratégia de posição para a dica. Possui dois valores: absolute e fixed. |
Texto Overflow com Dica
Lida com texto em excesso e exibe uma dica quando o texto transborda.- Uso
- Propriedades
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
export const MyComponent = () => {
const crmTaskDescription =
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| texto | string | O conteúdo que você deseja exibir na área de texto excessivo. |