> ## 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.

# Uygulama Araç İpucu

<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="Başlık" width="1440" height="680" data-path="images/user-guide/tips/light-bulb.png" />
</Frame>

Kullanıcı bir öğeyle etkileşimde bulunduğunda ek bilgi gösteren kısa bir mesaj.

<Tabs>
  <Tab title="Kullanım">
    ```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="Özellikler">
    | Özellikler       | Tür                                           | Açıklama                                                                                                                                                                                                       |
    | ---------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | className        | dize                                          | Ek stil tanımlamaları için isteğe bağlı CSS sınıfı                                                                                                                                                             |
    | anchorSelect     | CSS seçici                                    | Tooltip'in bağlantı elementi için seçici (tooltip'i tetikleyen öğe)                                                                                                                                            |
    | içerik           | dize                                          | Tooltip içinde göstermek istediğiniz içerik                                                                                                                                                                    |
    | delayHide        | sayı                                          | İmleç bağlantıdan ayrıldıktan sonra tooltip'in gizlenmesi için beklenen süre (saniye)                                                                                                                          |
    | offset           | sayı                                          | Tooltip'in konumlandırılması için piksel cinsinden ofset                                                                                                                                                       |
    | noArrow          | boolean                                       | `doğru` ise, tooltip'teki oku gizler                                                                                                                                                                           |
    | isOpen           | boolean                                       | `doğru` ise, tooltip varsayılan olarak açıktır                                                                                                                                                                 |
    | place            | `react-tooltip`'dan `PlacesType` string       | Tooltip'in yerleşimini belirtir. Değerler şunları içerir: `alt`, `sol`, `sağ`, `üst`, `üst-başlangıç`, `üst-bitiş`, `sağ-başlangıç`, `sağ-bitiş`, `alt-başlangıç`, `alt-bitiş`, `sol-başlangıç` ve `sol-bitiş` |
    | positionStrategy | `react-tooltip`'dan `PositionStrategy` string | Tooltip'in pozisyon stratejisi. İki değeri vardır: `absolute` ve `fixed`                                                                                                                                       |
  </Tab>
</Tabs>

## Tooltip ile Taşan Metin

Taşan metinleri ele alır ve metin taştığında bir tooltip gösterir.

<Tabs>
  <Tab title="Kullanım">
    ```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="Özellikler">
    | Özellikler | Tür  | Açıklama                                          |
    | ---------- | ---- | ------------------------------------------------- |
    | metin      | dize | Taşan metin alanında göstermek istediğiniz içerik |
  </Tab>
</Tabs>