github-actions[bot]
73b0d55350
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
95 lines
5.0 KiB
Plaintext
95 lines
5.0 KiB
Plaintext
---
|
|
title: تلميح التطبيق
|
|
icon: message
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="رأس الصفحة" />
|
|
</Frame>
|
|
|
|
رسالة مختصرة تعرض معلومات إضافية عند تفاعل المستخدم مع عنصر.
|
|
|
|
<Tabs>
|
|
<Tab title="استخدام">
|
|
|
|
```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="المحددات">
|
|
|
|
|
|
| المحددات | النوع | الوصف |
|
|
| ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| اسم الفئة | نص | فئة 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
|
|
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>
|