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.8 KiB
Plaintext
89 lines
4.8 KiB
Plaintext
---
|
|
title: App Verktygstips
|
|
image: /images/user-guide/tips/light-bulb.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Ett kortfattat meddelande som visar ytterligare information när en användare interagerar med ett element.
|
|
|
|
<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">
|
|
|
|
| Egenskaper | Typ | Beskrivning |
|
|
| ----------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | string | Valfri CSS-klass för ytterligare stil |
|
|
| anchorSelect | CSS-väljare | Väljare för tooltip-ankaret (det element som utlöser tooltipen) |
|
|
| innehåll | string | The content you want to display within the tooltip |
|
|
| fördröjDölj | nummer | The delay in seconds before hiding the tooltip after the cursor leaves the anchor |
|
|
| förskjutning | nummer | Förskjutningen i pixlar för placering av verktygstipset |
|
|
| noArrow | boolean | Om `true`, göms pilen på verktygstipset |
|
|
| ärÖppen | boolean | Om `true`, är verktygstipset öppet som standard |
|
|
| plats | `PlacesType` sträng från `react-tooltip` | Anger placeringen av verktygstipset. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end` |
|
|
| positionsStrategi | `PositionStrategy` sträng från `react-tooltip` | Positionsstrategi för verktygstipset. Har två värden: `absolut` och `fast` |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Överskjutande Text med Tooltip
|
|
|
|
Hanterar överskjutande text och visar ett verktygstips när texten överskrider.
|
|
|
|
<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">
|
|
|
|
| Egenskaper | Typ | Beskrivning |
|
|
| ---------- | ------ | ------------------------------------------------------- |
|
|
| text | string | Innehållet du vill visa i det överskjutande textområdet |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|