
- "Verwendung"
- "Eigenschaften"
Kopieren
KI fragen
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
export const MyComponent = () => {
return (
<>
<p id="hoverText" style={{ display: "inline-block" }}>
Kundeneinblicke
</p>
<AppTooltip
className
anchorSelect="#hoverText"
content="Erkunden Sie das Kundenverhalten und die Präferenzen"
delayHide={0}
offset={6}
noArrow={false}
isOpen={true}
place="bottom"
positionStrategy="absolute"
/>
</>
);
};
| ”Eigenschaften” | Typ | Beschreibung |
|---|---|---|
| Klassenname | Zeichenkette | Optionale CSS-Klasse für zusätzliche Stilgebung |
| anchorSelect | CSS-Selektor | Selektor für den Tooltip-Anker (das Element, das den Tooltip triggert) |
| Inhalt | string | Der Inhalt, den Sie im Tooltip anzeigen möchten |
| delayHide | nummer | Die Verzögerung in Sekunden, bis der Tooltip nach dem Verlassen des Ankers ausgeblendet wird |
| offset | nummer | Der Versatz in Pixeln zur Positionierung des Tooltips |
| noArrow | boolesch | Wenn wahr, wird der Pfeil am Tooltip ausgeblendet |
| isOpen | boolesch | Wenn wahr, ist der Tooltip standardmäßig geöffnet |
| place | PlacesType Zeichenkette von react-tooltip | Gibt die Platzierung des Tooltips an. Werte umfassen unten, links, rechts, oben, oben-start, oben-end, rechts-start, rechts-end, unten-start, unten-end, links-start, und links-end |
| positionStrategy | PositionStrategy Zeichenkette von react-tooltip | Positionsstrategie für den Tooltip. Hat zwei Werte: absolut und fest |
Überlaufender Text mit Tooltip
Behandelt überlaufenden Text und zeigt einen Tooltip an, wenn der Text überläuft.- Verwendung
- Eigenschaften
Kopieren
KI fragen
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
export const MyComponent = () => {
const crmTaskDescription =
'Fassen Sie beim Kunden aufgrund seiner jüngsten Produktanfrage nach. Besprechen Sie Preisoptionen, gehen Sie auf eventuelle Bedenken ein und stellen Sie zusätzliche Produktinformationen bereit. Protokollieren Sie die Details des Gesprächs im CRM zur späteren Referenz.';
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
| Eigenschaften | Typ | Beschreibung |
|---|---|---|
| text | Zeichenkette | Der Inhalt, den Sie im überlaufenden Textbereich anzeigen möchten |