> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dica do Aplicativo

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/tips/light-bulb.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2801cd9b03d8ff39bb24472e0311f540" alt="Cabeçalho" width="1440" height="680" data-path="images/user-guide/tips/light-bulb.png" />
</Frame>

Uma mensagem breve que exibe informações adicionais quando um usuário interage com um elemento.

<Tabs>
  <Tab title="Uso">
    ```jsx theme={null}
    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 theme={null}
    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>