github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
95 lines
4.6 KiB
Plaintext
95 lines
4.6 KiB
Plaintext
---
|
|
title: Dica do Aplicativo
|
|
icon: mensagem
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Cabeçalho" />
|
|
</Frame>
|
|
|
|
Uma mensagem breve que exibe informações adicionais quando um usuário interage com um elemento.
|
|
|
|
<Tabs>
|
|
<Tab title="Uso">
|
|
|
|
```jsx
|
|
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"
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Propriedades">
|
|
|
|
|
|
| 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`. |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Texto Overflow com Dica
|
|
|
|
Lida com texto em excesso e exibe uma dica quando o texto transborda.
|
|
|
|
<Tabs>
|
|
<Tab title="Uso">
|
|
|
|
```jsx
|
|
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} />;
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Propriedades">
|
|
|
|
|
|
| Propriedades | Tipo | Descrição |
|
|
| ------------ | ------ | ------------------------------------------------------------- |
|
|
| texto | string | O conteúdo que você deseja exibir na área de texto excessivo. |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|