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: Tooltip aplikace
|
|
image: /images/user-guide/tips/light-bulb.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Krátká zpráva, která zobrazí další informace, když uživatel interaguje s prvkem.
|
|
|
|
<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">
|
|
|
|
| Vlastnosti | Typ | Popis |
|
|
| ---------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | textový řetězec | Volitelná CSS třída pro dodatečné stylování. |
|
|
| anchorSelect | CSS selektor | Selektor pro kotvu tooltipu (prvek, který spouští tooltip). |
|
|
| obsah | textový řetězec | Obsah, který chcete zobrazit v rámci tooltipu. |
|
|
| delayHide | číslo | Zpoždění v sekundách před skrytím tooltipu poté, co kurzor opustí kotvu. |
|
|
| odsazení | číslo | Odsazení v pixelech pro umístění tooltipu. |
|
|
| noArrow | booleovská hodnota | Pokud je `true`, skrývá šipku na tooltipu. |
|
|
| isOpen | booleovská hodnota | Pokud je `true`, tooltip je výchozím způsobem otevřen. |
|
|
| umístění | řetězec `PlacesType` z `react-tooltipu` | Určuje umístění tooltipu. Hodnoty zahrnují `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, a `left-end`. |
|
|
| positionStrategy | `PositionStrategy` string from `react-tooltip` | Strategie umístění pro tooltip. Má dvě hodnoty: `absolute` a `fixed`. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Přetékající text s tooltipem
|
|
|
|
Řeší přetékající text a zobrazuje tooltip, když text přetéká.
|
|
|
|
<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">
|
|
|
|
| Vlastnosti | Typ | Popis |
|
|
| ---------- | --------------- | --------------------------------------------------------------------------- |
|
|
| text | textový řetězec | Obsah, který chcete zobrazit v oblasti přetékajícího textu. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|