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

# تلميح التطبيق

<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="رأس الصفحة" width="1440" height="680" data-path="images/user-guide/tips/light-bulb.png" />
</Frame>

رسالة مختصرة تعرض معلومات إضافية عند تفاعل المستخدم مع عنصر.

<Tabs>
  <Tab title="استخدام">
    ```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="المحددات">
    | المحددات           | النوع                                    | الوصف                                                                                                                                                                                |
    | ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
    | اسم الفئة          | نص                                       | فئة CSS اختيارية للتنسيق الإضافي                                                                                                                                                     |
    | اختيار الربط       | محدد CSS                                 | المحدِّد لمرساة التلميح (العنصر الذي يُفعّل التلميح)                                                                                                                                 |
    | المحتوى            | نص                                       | المحتوى الذي تريد عرضه داخل التلميح                                                                                                                                                  |
    | تأخير الإخفاء      | رقم                                      | التأخير بالثواني قبل إخفاء التلميح بعد مغادرة المؤشر للمرساة                                                                                                                         |
    | الإزاحة            | رقم                                      | الإزاحة بالبكسل لتحديد موضع التلميح                                                                                                                                                  |
    | بدون سهم           | قيمة منطقية                              | إذا كانت القيمة `صحيح`, سيتم إخفاء السهم في المربط التنبيهي                                                                                                                          |
    | مفتوح              | قيمة منطقية                              | إذا كانت القيمة `صحيح`, يكون المربط التنبيهي مفتوحًا افتراضيًا                                                                                                                       |
    | المكان             | نص `PlacesType` من `react-tooltip`       | يحدد موضع المربط التنبيهي. تتضمن القيم `bottom`، `left`، `right`، `top`، `top-start`، `top-end`، `right-start`، `right-end`، `bottom-start`، `bottom-end`، `left-start`، و`left-end` |
    | استراتيجية الوضعية | نص `PositionStrategy` من `react-tooltip` | استراتيجية وضعية للمربط التنبيهي. له قيمتان: `absolute` و`fixed`                                                                                                                     |
  </Tab>
</Tabs>

## نص متجاوز مع تلميح

يعالج النص الزائد ويعرض مربط تنبيهي عند فيضان النص.

<Tabs>
  <Tab title="استخدام">
    ```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="الخصائص">
    | الخصائص | النوع  | الوصف                                         |
    | ------- | ------ | --------------------------------------------- |
    | نص      | string | المحتوى الذي تريد عرضه في منطقة النص المتجاوز |
  </Tab>
</Tabs>