Abdul Rahman
89 lines
4.5 KiB
Plaintext
89 lines
4.5 KiB
Plaintext
---
|
|
title: 應用程式提示
|
|
image: /images/user-guide/tips/light-bulb.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
當用戶與某一元素進行互動時，顯示額外信息的簡短訊息。
|
|
|
|
<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">
|
|
|
|
| 屬性 | 類型 | 描述 |
|
|
| ---------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| 類名稱 | 字串 | 用於額外樣式的可選 CSS 類 |
|
|
| anchorSelect | CSS 選擇器 | 提示錨 (觸發提示的元素) 的選擇器 |
|
|
| content | 字串 | 您希望在工具提示中顯示的內容 |
|
|
| delayHide | 數字 | 將滑鼠游標離開錨定後，工具提示隱藏的秒數延遲 |
|
|
| offset | 數字 | 定位工具提示的像素偏移量 |
|
|
| noArrow | 布爾值 | 如果為 `true`，則隱藏工具提示上的箭頭 |
|
|
| isOpen | 布爾值 | 如果為 `true`，則默認情況下工具提示是開啟的 |
|
|
| place | 來自 `react-tooltip` 的 `PlacesType` 字符串 | 指定工具提示的位置。 指定工具提示的位置。 值包括 `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, 和 `left-end` |
|
|
| positionStrategy | 來自 `react-tooltip` 的 `PositionStrategy` 字符串 | 工具提示的定位策略。 有兩個值：`absolute` 和 `fixed` |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## 帶提示的溢出文本
|
|
|
|
處理溢出文本並在文本溢出時顯示工具提示。
|
|
|
|
<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">
|
|
|
|
| 屬性 | 類型 | 描述 |
|
|
| -- | -- | ---------------- |
|
|
| 文本 | 字串 | 您希望在溢出文本區域中顯示的內容 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|