github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
95 lines
4.7 KiB
Plaintext
95 lines
4.7 KiB
Plaintext
---
|
||
title: Uygulama Araç İpucu
|
||
icon: mesaj
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/tips/light-bulb.png" alt="Başlık" />
|
||
</Frame>
|
||
|
||
Kullanıcı bir öğeyle etkileşimde bulunduğunda ek bilgi gösteren kısa bir mesaj.
|
||
|
||
<Tabs>
|
||
<Tab title="Kullanım">
|
||
|
||
```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="Ö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
|
||
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>
|