github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
89 lines
4.7 KiB
Plaintext
89 lines
4.7 KiB
Plaintext
---
|
|
title: App Tooltip
|
|
image: '"/images/user-guide/tips/light-bulb.png"'
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Một thông điệp ngắn hiển thị thông tin bổ sung khi người dùng tương tác với một phần tử.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Lớp CSS tùy chọn cho phong cách bổ sung |
|
|
| anchorSelect | Bộ chọn CSS | Bộ chọn cho mỏ neo tooltip (phần tử kích hoạt tooltip) |
|
|
| nội dung | string | Nội dung bạn muốn hiển thị trong tooltip |
|
|
| delayHide | số | Thời gian trễ tính bằng giây trước khi ẩn tooltip sau khi trỏ chuột rời khỏi mỏ neo |
|
|
| độ chệch | số | Độ chệch tính bằng pixel để định vị tooltip |
|
|
| noArrow | boolean | Nếu `true`, ẩn mũi tên trên tooltip |
|
|
| isOpen | boolean | Nếu `true`, tooltip được mở mặc định |
|
|
| vị trí | Chuỗi `PlacesType` từ `react-tooltip` | Xác định vị trí của tooltip. Giá trị bao gồm `dưới`, `trái`, `phải`, `trên`, `trên-đầu`, `trên-cuối`, `phải-đầu`, `phải-cuối`, `dưới-đầu`, `dưới-cuối`, `trái-đầu` và `trái-cuối` |
|
|
| chiến lược định vị | Chuỗi `PositionStrategy` từ `react-tooltip` | Chiến lược định vị cho tooltip. Có hai giá trị: `tuyệt đối` và `cố định` |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Văn bản tràn với Tooltip
|
|
|
|
Xử lý văn bản tràn và hiển thị tooltip khi văn bản tràn.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Thuộc Tính | Loại | Mô tả |
|
|
| ---------- | ------ | ----------------------------------------------------- |
|
|
| văn bản | string | Nội dung bạn muốn hiển thị trong khu vực văn bản tràn |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|