ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Overlays

Tooltip

rx.tooltip

Offizielle Doku

Werkstattauftrag

Eine Werkzeugleiste besteht nur aus Icons. Gib jedem Button eine kurze Erklärung, die beim Darüberfahren mit der Maus verrät, was er tut.

rx.tooltip ist eine kleine Erklärung, die kurz erscheint, wenn man mit der Maus über ein Element fährt oder es per Tastatur fokussiert. Das Element, um das es geht, kommt als Kind hinein, der anzuzeigende Text über die Prop content. Am häufigsten benennt man damit Elemente ohne Beschriftung, etwa Icon-Buttons.

rx.tooltip(
    rx.button("Hover over me"),
    content="This is the tooltip content.",
)

Props ausprobieren

Die meisten Props eines Tooltips bestimmen seine Position. Ändere einen Wert und fahre dann mit der Maus über den Button. delay_duration ist die Wartezeit in Millisekunden, bis der Tooltip nach dem Darüberfahren erscheint.

Props ausprobieren

content

side

align

side_offset

delay_duration

700

avoid_collisions

rx.tooltip(
    rx.button("Hover me", variant="soft"),
    content="Save changes",
    side="top",
    align="center",
    side_offset=4,
    delay_duration=700,
    avoid_collisions=True,
)

side legt fest, auf welcher Seite er erscheint, align, wo er auf dieser Seite ausgerichtet wird, und side_offset den Abstand zum Button.

Prop	Werte	Standard	Verwendung
`content`	String	-	Text im Tooltip
`side`	`"top"` `"right"` `"bottom"` `"left"`	`"top"`	Seite, auf der er erscheint
`align`	`"start"` `"center"` `"end"`	`"center"`	Ausrichtung auf dieser Seite
`side_offset` · `align_offset`	Zahl (px)	-	Abstand zum Element bzw. zusätzliche Verschiebung von der Ausrichtung
`avoid_collisions`	`True` / `False`	`True`	Am Bildschirmrand auf die Gegenseite ausweichen
`collision_padding`	Zahl oder dict pro Richtung	-	Abstand, ab dem der Bildschirmrand als erreicht gilt
`arrow_padding`	Zahl (px)	-	Abstand zwischen Pfeil und Ecke
`sticky`	`"partial"` `"always"`	`"partial"`	Wie fest er beim Scrollen am Element haftet
`hide_when_detached`	`True` / `False`	`False`	Tooltip ausblenden, wenn das Element verdeckt ist
`delay_duration`	Millisekunden	`700`	Wartezeit bis zum Erscheinen
`disable_hoverable_content`	`True` / `False`	-	Auch schließen, wenn die Maus auf den Tooltip wandert
`default_open`	`True` / `False`	-	Beim ersten Rendern offen (unkontrolliert)
`open`	`True` / `False`	-	Offen-Zustand über den State steuern (kontrolliert)
`force_mount`	`True` / `False`	-	Auch geschlossen im DOM lassen (für Animationsbibliotheken)
`aria_label`	String	-	Name, den Screenreader vorlesen
`on_open_change`	Event	-	Beim Öffnen oder Schließen; übergibt den neuen Offen-Wert (bool)
`on_escape_key_down`	Event	-	Beim Drücken der Esc-Taste
`on_pointer_down_outside`	Event	-	Beim Klick außerhalb des Tooltips

Vier Richtungen

side ist nur ein Wunsch. Ist auf dieser Seite kein Platz, sorgt avoid_collisions dafür, dass der Tooltip auf der Gegenseite erscheint.

rx.flex(
    rx.tooltip(rx.button("top", variant="outline"), content="side=top", side="top"),
    rx.tooltip(rx.button("right", variant="outline"), content="side=right", side="right"),
    rx.tooltip(rx.button("bottom", variant="outline"), content="side=bottom", side="bottom"),
    rx.tooltip(rx.button("left", variant="outline"), content="side=left", side="left"),
    spacing="3",
    wrap="wrap",
)

Beim Öffnen und Schließen: on_open_change

Jedes Mal, wenn sich der Tooltip öffnet oder schließt, wird on_open_change aufgerufen, und der neue Offen-Wert (True/False) landet im Handler. Das Beispiel unten zeigt, wie oft das passiert ist und wie der aktuelle Zustand lautet.

Opened or closed: 0 times

Tooltip open: no

class TooltipEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", TooltipEventState.num_opens, " times"),
    rx.text("Tooltip open: ", rx.cond(TooltipEventState.opened, "yes", "no")),
    rx.tooltip(
        rx.button("Hover over me"),
        content="This is the tooltip content.",
        on_open_change=TooltipEventState.count_opens,
    ),
    direction="column",
    spacing="3",
    align="start",
)

Öffnen und Schließen über den State

Verbindest du open mit einem State-Wert, entscheidet der Code, ob der Tooltip offen ist. Dann musst du auch on_open_change anbinden, damit das Öffnen und Schließen per Maus zurück in den State fließt. Unten kannst du den Hinweis per Button dauerhaft einblenden oder ihn öffnen, indem du mit der Maus über das Eingabefeld fährst.

class TooltipControlState(rx.State):
    show: bool = False

    @rx.event
    def set_show(self, value: bool):
        self.show = value

    @rx.event
    def toggle(self):
        self.show = not self.show


rx.flex(
    rx.tooltip(
        rx.input(placeholder="Coupon code", width="12em"),
        content="Codes are 8 letters, e.g. SPRING24",
        open=TooltipControlState.show,
        on_open_change=TooltipControlState.set_show,
        side="right",
    ),
    rx.button(
        rx.cond(TooltipControlState.show, "Hide hint", "Show hint"),
        on_click=TooltipControlState.toggle,
        variant="soft",
    ),
    spacing="3",
    align="center",
    wrap="wrap",
)

Weitere Props

default_open=True öffnet den Tooltip nur beim ersten Mal; danach öffnet und schließt er sich wie gewohnt mit der Maus. Mit disable_hoverable_content schließt er sich sofort, auch wenn die Maus auf den Tooltip wandert. Ist content zu knapp, um verständlich zu sein, gibst du Screenreadern mit aria_label einen eigenen Namen.

rx.flex(
    rx.tooltip(rx.button("default_open"), content="Open on first render", default_open=True, side="bottom"),
    rx.tooltip(rx.button("disable_hoverable_content", variant="soft"), content="Closes as soon as you leave the button",
               disable_hoverable_content=True),
    rx.tooltip(rx.icon_button(rx.icon("info"), variant="ghost"), content="?", aria_label="More information about this field"),
    spacing="3",
    wrap="wrap",
    align="center",
)

Auftrag erledigt

Jeder Icon-Button bekommt per Tooltip einen Namen, und mit side="bottom" erscheinen die Tooltips unterhalb der Leiste. Damit man beim Entlangfahren an der Leiste nicht lange warten muss, verkürzen wir auch delay_duration.

rx.flex(
    rx.tooltip(rx.icon_button(rx.icon("bold"), variant="ghost", aria_label="Bold"), content="Bold (Ctrl+B)", side="bottom", delay_duration=200),
    rx.tooltip(rx.icon_button(rx.icon("italic"), variant="ghost", aria_label="Italic"), content="Italic (Ctrl+I)", side="bottom", delay_duration=200),
    rx.tooltip(rx.icon_button(rx.icon("underline"), variant="ghost", aria_label="Underline"), content="Underline (Ctrl+U)", side="bottom", delay_duration=200),
    rx.separator(orientation="vertical", size="1"),
    rx.tooltip(rx.icon_button(rx.icon("link"), variant="ghost", aria_label="Insert link"), content="Insert link", side="bottom", delay_duration=200),
    spacing="2",
    align="center",
    padding="6px",
    border=f"1px solid {rx.color('gray', 6)}",
    border_radius="8px",
    width="fit-content",
)

Werkstattnotizen

rx.tooltip(element, content="Text"): erscheint beim Darüberfahren mit der Maus oder bei Fokus.
Position über side · align · side_offset, Verhalten am Bildschirmrand über avoid_collisions · collision_padding.
delay_duration regelt, wann er erscheint (Standard 700 ms).
on_open_change übergibt den neuen Offen-Wert (bool). Wer open über den State steuert, muss es unbedingt mit anbinden.
Ein Tooltip ist eine Zusatzinfo. Was man unbedingt wissen oder anklicken muss, gehört in ein Popover oder einen Dialog.

← Zurück

Auf- und Zuklappen · Segmented Control

Weiter →

Overlays · Popover

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex