# QuickInfo-Komponente für Stripe-Apps Verwenden Sie QuickInfos, um zusätzliche kontextbezogene Informationen zu einem bestimmten Element oder Thema anzugeben. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=8. So fügen Sie Ihrer App die `Tooltip` Komponente hinzu: ```js import {Tooltip} from '@stripe/ui-extension-sdk/ui'; ``` Dies ist eine Vorschau der beiden `Tooltip`-Komponenten, jeweils mit dem Typ `label`: QuickInfos sind Einblendungen, die angezeigt werden, wenn Nutzer/innen den Mauszeiger über ein Zielement bewegen oder ein Element fokussieren. Verwenden Sie Tooltips, um zusätzliche kontextbezogene Informationen über ein bestimmtes Element oder Thema zu geben. Sie können Tootips entweder als **Beschreibungen** oder als **Label** verwenden. Fügen Sie möglichst keine interaktiven Inhalte wie Links in eine QuickInfo ein, da Tastaturnutzer/innen nicht darauf zugreifen können. ### Tooltip-Eigenschaften | Eigenschaft | Typ | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `trigger` | (Pflichtfeld) `React.ReactElement` Das Zielelement, das als `Tooltip`-Auslöser verwendet werden soll. | | `delay` | (Optional) `number | undefined` Wie lange in Millisekunden gewartet werden soll, bevor der `Tooltip` angezeigt wird, wenn der Mauszeiger darüber bewegt wird. | | `placement` | (Optional) `("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined` Wie der `Tooltip` relativ zum Auslöseelement platziert werden soll. | | `type` | (Optional) `("label" | "description") | undefined` Die Stilvariante des `Tooltip`. | ## Platzierung Sie können QuickInfos in einer von 4 Hauptrichtungen platzieren und sie zusätzlich entlang einer sekundären Achse ausrichten, was insgesamt 12 mögliche Platzierungsoptionen in Bezug auf den `trigger` ergibt. Die Platzierung wird automatisch nach Bedarf angepasst, sodass sichergestellt wird, dass die QuickInfo im Darstellungsfeld sichtbar bleibt. ## Verzögerung QuickInfos werden mit einer kurzen Verzögerung angezeigt, nachdem der Mauszeiger über ihr Auslöseelement bewegt wurde. Sie können den Zeitraum, bis eine QuickInfo aktiv wird, nachdem der Mauszeiger darüber bewegt wurde, mit der Eigenschaft `delay` steuern. QuickInfos werden immer sofort angezeigt, wenn ihr Auslöseelement den Tastaturfokus erhält. QuickInfos werden sofort angezeigt, wenn Sie den Mauszeiger darüber bewegen, während eine andere QuickInfo bereits aktiv ist. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=9. So fügen Sie Ihrer App die `Tooltip` Komponente hinzu: ```js import {Tooltip} from '@stripe/ui-extension-sdk/ui'; ``` Dies ist eine Vorschau der beiden `Tooltip`-Komponenten, jeweils mit dem Typ `label`: QuickInfos sind Einblendungen, die angezeigt werden, wenn Nutzer/innen den Mauszeiger über ein Zielement bewegen oder ein Element fokussieren. Verwenden Sie Tooltips, um zusätzliche kontextbezogene Informationen über ein bestimmtes Element oder Thema zu geben. Sie können Tootips entweder als **Beschreibungen** oder als **Label** verwenden. Fügen Sie möglichst keine interaktiven Inhalte wie Links in eine QuickInfo ein, da Tastaturnutzer/innen nicht darauf zugreifen können. ### Tooltip-Eigenschaften | Eigenschaft | Typ | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Pflichtfeld) `React.ReactNode` Der Inhalt der Komponente. | | `trigger` | (Pflichtfeld) `React.ReactElement` Das Zielelement, das als `Tooltip`-Auslöser verwendet werden soll. | | `delay` | (Optional) `number | undefined` Wie lange in Millisekunden gewartet werden soll, bevor der `Tooltip` angezeigt wird, wenn der Mauszeiger darüber bewegt wird. | | `placement` | (Optional) `("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined` Wie der `Tooltip` relativ zum Auslöseelement platziert werden soll. | | `type` | (Optional) `("label" | "description") | undefined` Die Stilvariante des `Tooltip`. | ## Platzierung Sie können QuickInfos in einer von 4 Hauptrichtungen platzieren und sie zusätzlich entlang einer sekundären Achse ausrichten, was insgesamt 12 mögliche Platzierungsoptionen in Bezug auf den `trigger` ergibt. Die Platzierung wird automatisch nach Bedarf angepasst, sodass sichergestellt wird, dass die QuickInfo im Darstellungsfeld sichtbar bleibt. ## Verzögerung QuickInfos werden mit einer kurzen Verzögerung angezeigt, nachdem der Mauszeiger über ihr Auslöseelement bewegt wurde. Sie können den Zeitraum, bis eine QuickInfo aktiv wird, nachdem der Mauszeiger darüber bewegt wurde, mit der Eigenschaft `delay` steuern. QuickInfos werden immer sofort angezeigt, wenn ihr Auslöseelement den Tastaturfokus erhält. QuickInfos werden sofort angezeigt, wenn Sie den Mauszeiger darüber bewegen, während eine andere QuickInfo bereits aktiv ist. ## See also - [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md) - [App gestalten](https://docs.stripe.com/stripe-apps/style.md) - [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)