{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "hovercard-interest-invoker",
 "name": "Hovercard / Vorschau per Interest Invoker",
 "name_en": "Hovercard with interestfor + popover=hint",
 "kurz": "Fachbegriffe und Namen öffnen nach kurzem Verweilen eine Erklär- oder Profilkarte, nativ per interestfor und popover=hint, ohne Seitenwechsel.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "ruhig",
  "funktional"
 ],
 "technik": [
  "css",
  "popover-api",
  "anchor-positioning",
  "interest-invokers",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein normaler Link bekommt interestfor mit der ID einer Karte. Die Karte ist ein Element mit popover=\"hint\". Der Browser öffnet sie bei Interesse: Hover, Tastaturfokus oder langes Drücken. Eine eingebaute Verzögerung (Standard 0,5 s rein und raus) verhindert Flackern beim Drüberstreifen und erlaubt den Weg vom Link in die Karte. Anchor Positioning setzt die Karte an den Link und klappt sie am Rand um. Ein- und Ausblenden laufen über @starting-style und transition-behavior: allow-discrete.",
  "warum_es_wirkt": "Kontext ohne Seitenwechsel: Glossar, Profil oder Artikelvorschau erscheinen genau dort, wo die Frage entsteht. Seit 2026 geht das in Chromium ohne JavaScript, mit Tastatur und mit korrekter Verknüpfung für Screenreader. Es ist das Hover-Muster der Plattform.",
  "wann_einsetzen": "Glossarbegriffe und Fachwörter, Personen- und Autorenlinks, Fußnoten, Projekt-Teaser in Listen, Referenzen in Case Studies.",
  "wann_nicht": "Für kurze Tooltips an Symbolen (eigenes Tooltip-Muster). Für Informationen, die man unbedingt sehen muss: Sie gehören in den Text. Wo langes Drücken auf Touch mit dem Systemmenü kollidiert.",
  "varianten": [
   "Reiner Erklärtext ohne Links (der Browser setzt aria-describedby)",
   "Karte mit Links und Knopf, etwa Profil mit „Termin anfragen“ (der Browser setzt aria-details)",
   "Kürzere Verzögerung, z. B. interest-delay: .2s .1s",
   "Skip-Delay: Verzögerung 0, wenn schon eine Karte offen ist (:root:has(:interest-source))",
   "Karte morpht beim Klick per View Transition in die Zielseite",
   "Polyfill für Browser ohne interestfor"
  ],
  "umsetzung": "HTML: <a href=\"/glossar#sprechstunde\" interestfor=\"hc1\">Sprechstunde</a> und <div id=\"hc1\" popover=\"hint\" class=\"hc\">…</div>.\n\nCSS: .hc { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; inset: auto; margin: 10px 0 0; opacity: 0; transform: translateY(-8px) scale(.95); transition: opacity .4s, transform .4s, display .4s allow-discrete, overlay .4s allow-discrete } .hc:popover-open { opacity: 1; transform: none } @starting-style { .hc:popover-open { opacity: 0; transform: translateY(-8px) scale(.95) } } [interestfor] { interest-delay: .2s .1s } :root:has(:interest-source) [interestfor] { interest-delay-start: 0s }. Die Transition nur unter prefers-reduced-motion: no-preference setzen.\n\nFallstricke: Die UA-Styles von [popover] (inset: 0, margin: auto) zurücksetzen, sonst steht die Karte in der Mitte. role=tooltip und aria-describedby nicht selbst setzen, das macht der Browser. Rückfall ohne interestfor: dieselbe Zeitlogik per pointerenter/leave und focus/blur, Öffnen mit showPopover({ source: link }), damit der Link der Anker wird. Polyfill nur bei Bedarf laden.",
  "mobil": "Laut Spezifikation öffnet langes Drücken; ein normales Tippen navigiert. Für Glossar und Profile ist Tippen zum Öffnen verständlicher. Die Erklärung muss außerdem auf der Seite stehen (Glossar, FAQ).",
  "reduzierte_bewegung": "Ohne Transition: Die Karte ist sofort da und sofort weg. Die Verzögerung bleibt, weil sie kein Bewegungseffekt ist.",
  "barrierefreiheit": "Der Browser verknüpft Link und Karte selbst: aria-describedby bei reinem Text, aria-details bei interaktivem Inhalt. Tastaturfokus öffnet ebenfalls, Esc schließt. Inhalte der Karte zusätzlich auf der Zielseite oder im Glossar anbieten."
 },
 "messwerte": {
  "easing": "Standard (ease) laut Anleitung",
  "dauer_ms": "400 Ein-/Ausblenden; interest-delay Standard 500 ein/aus, Beispiel 200/100",
  "stagger_ms": "",
  "distanz": "translateY −10 px, scale 0.95 als Startzustand",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/hovercard"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.1,
   0.25,
   1.0
  ],
  "css": "cubic-bezier(0.25, 0.1, 0.25, 1)",
  "name": "ease",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Chrome Developers: Hovercard",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/hovercard",
   "auszeichnung": "",
   "beobachtung": "Offizielle Anleitung mit interestfor, popover=hint, interest-delay 0.2s 0.1s, position-area block-end span-inline-end, Ein-/Ausblenden 0.4 s (translateY −10px, scale .95) nur unter no-preference.",
   "art": "artikel"
  },
  {
   "seite": "Chrome Blog: New in Web UI – I/O 2025 Recap",
   "url": "https://developer.chrome.com/blog/new-in-web-ui-io-2025-recap",
   "auszeichnung": "",
   "beobachtung": "Interest Invokers und popover=hint als kommende Hover-Primitive; popover=hint in Chrome 151 genannt.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Hovercard",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/hovercard"
  },
  {
   "titel": "Chrome: Interest-triggered tooltips",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-behaviors/interest-triggered-tooltips"
  }
 ],
 "kombinierbar_mit": [
  "einblenden-starting-style",
  "listen-hover-bildvorschau"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/",
  "meta": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/hovercard-interest-invoker/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: Keine Produktionsseite mit interestfor/popover='hint' gefunden (nur ein Selektor-Check in einem Atlassian-404-Bundle). Feature ist zu neu für Produktionsbelege."
  ],
  "prioritaet_hinweis": "31.10.2026: A → C laut patch-belege-1.json (Keine Produktionsseite mit interestfor/popover='hint' gefunden (nur ein Selektor-Check in einem Atlassian-404-Bundle). Feature ist zu neu für Produktionsbelege.)",
  "trendstatus_begruendung": "aufkommend – bisher nur Chromium, keine Produktionsbelege"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Fachbegriffe und Namen öffnen nach kurzem Verweilen eine Erklär- oder Profilkarte, nativ per interestfor und popover=hint, ohne Seitenwechsel.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "interest_delay": "Demo-Standard .2s .1s (rein/raus, Chrome-Anleitung); umschaltbar auf Browser-Standard .5s .5s",
   "skip_delay": ":root:has(:interest-source) [interestfor] { interest-delay-start: 0s } (Variante „+ Skip“)",
   "einblenden": "opacity 0 → 1, translateY −8 px → 0, scale .95 → 1",
   "dauer_ms": 400,
   "easing": "cubic-bezier(0.25, 0.1, 0.25, 1) (ease, wie in der Chrome-Anleitung gemessen)",
   "diskret": "@starting-style für den Startzustand; transition auf display und overlay mit allow-discrete, damit auch das Ausblenden animiert",
   "position": "position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; 10 px Abstand zum Auslöser",
   "weg_px": "8 statt 10 der Chrome-Anleitung (Rezept: Einblendungen höchstens 8 px Weg)",
   "ui": "Hintergrund des Auslösers 150 ms cubic-bezier(0.2, 0, 0.38, 0.9) (Rezept-Token tech-präzise)",
   "karten": "Glossar 356 px breit, Grund #003f3c; Profilkarte 372 px, Grund #fbfbfa; Radius 16 px",
   "rueckfall": "Ohne interestfor dieselbe Zeitlogik per pointerenter/leave und focus/blur mit showPopover({ source }); ohne Anchor Positioning Platzierung per JS"
  },
  "ausloeser": "hover",
  "touch": "Tippen auf einen Begriff oder Namen öffnet die Karte statt zu navigieren; Tippen daneben schließt (Light Dismiss von popover=hint). Hinweistext wechselt auf „Tippen Sie …“. Unten eine feste Leiste Anrufen / Termin / Anfahrt; das Pult rückt darüber.",
  "reduziert": "Karten erscheinen und verschwinden ohne Transition, ohne Versatz und ohne Skalierung. Zeitlogik (interest-delay) bleibt gleich.",
  "korrekturen": {
   "beschreibung": "Ein normaler Link bekommt interestfor mit der ID einer Karte. Die Karte ist ein Element mit popover=\"hint\". Der Browser öffnet sie bei Interesse: Hover, Tastaturfokus oder langes Drücken. Eine eingebaute Verzögerung (Standard 0,5 s rein und raus) verhindert Flackern beim Drüberstreifen und erlaubt den Weg vom Link in die Karte. Anchor Positioning setzt die Karte an den Link und klappt sie am Rand um. Ein- und Ausblenden laufen über @starting-style und transition-behavior: allow-discrete.",
   "warum_es_wirkt": "Kontext ohne Seitenwechsel: Glossar, Profil oder Artikelvorschau erscheinen genau dort, wo die Frage entsteht. Seit 2026 geht das in Chromium ohne JavaScript, mit Tastatur und mit korrekter Verknüpfung für Screenreader. Es ist das Hover-Muster der Plattform.",
   "wann_einsetzen": "Glossarbegriffe und Fachwörter, Personen- und Autorenlinks, Fußnoten, Projekt-Teaser in Listen, Referenzen in Case Studies.",
   "wann_nicht": "Für kurze Tooltips an Symbolen (eigenes Tooltip-Muster). Für Informationen, die man unbedingt sehen muss: Sie gehören in den Text. Wo langes Drücken auf Touch mit dem Systemmenü kollidiert.",
   "varianten": [
    "Reiner Erklärtext ohne Links (der Browser setzt aria-describedby)",
    "Karte mit Links und Knopf, etwa Profil mit „Termin anfragen“ (der Browser setzt aria-details)",
    "Kürzere Verzögerung, z. B. interest-delay: .2s .1s",
    "Skip-Delay: Verzögerung 0, wenn schon eine Karte offen ist (:root:has(:interest-source))",
    "Karte morpht beim Klick per View Transition in die Zielseite",
    "Polyfill für Browser ohne interestfor"
   ],
   "umsetzung": "HTML: <a href=\"/glossar#sprechstunde\" interestfor=\"hc1\">Sprechstunde</a> und <div id=\"hc1\" popover=\"hint\" class=\"hc\">…</div>.\n\nCSS: .hc { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; inset: auto; margin: 10px 0 0; opacity: 0; transform: translateY(-8px) scale(.95); transition: opacity .4s, transform .4s, display .4s allow-discrete, overlay .4s allow-discrete } .hc:popover-open { opacity: 1; transform: none } @starting-style { .hc:popover-open { opacity: 0; transform: translateY(-8px) scale(.95) } } [interestfor] { interest-delay: .2s .1s } :root:has(:interest-source) [interestfor] { interest-delay-start: 0s }. Die Transition nur unter prefers-reduced-motion: no-preference setzen.\n\nFallstricke: Die UA-Styles von [popover] (inset: 0, margin: auto) zurücksetzen, sonst steht die Karte in der Mitte. role=tooltip und aria-describedby nicht selbst setzen, das macht der Browser. Rückfall ohne interestfor: dieselbe Zeitlogik per pointerenter/leave und focus/blur, Öffnen mit showPopover({ source: link }), damit der Link der Anker wird. Polyfill nur bei Bedarf laden.",
   "mobil": "Laut Spezifikation öffnet langes Drücken; ein normales Tippen navigiert. Für Glossar und Profile ist Tippen zum Öffnen verständlicher. Die Erklärung muss außerdem auf der Seite stehen (Glossar, FAQ).",
   "reduzierte_bewegung": "Ohne Transition: Die Karte ist sofort da und sofort weg. Die Verzögerung bleibt, weil sie kein Bewegungseffekt ist.",
   "barrierefreiheit": "Der Browser verknüpft Link und Karte selbst: aria-describedby bei reinem Text, aria-details bei interaktivem Inhalt. Tastaturfokus öffnet ebenfalls, Esc schließt. Inhalte der Karte zusätzlich auf der Zielseite oder im Glossar anbieten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept praxis-gesundheit-ruhig, erfundene Psychotherapie-Praxis Tiefburg in Heidelberg (Petrol #005450 auf #f5f7f7, Hedvig Letters Serif + Google Sans Flex). Abschnitt „Wobei wir helfen“: drei Fachbegriffe öffnen dunkle Glossar-Hinweise, zwei Namen öffnen Profilkarten mit nächstem Termin und Knopf. Alles steht zusätzlich im Glossar unten (Rezeptregel). Pult schaltet interest-delay zwischen .5s .5s, .2s .1s und Skip-Delay. Die Vorführung simuliert die Zeitlogik mit einem gezeichneten Zeiger (popover=manual, damit er über den Karten im Top Layer liegt). Referenzen: developer.chrome.com, hellobetter.de, ouraring.com. AD-Review 01.11.2026: Note 4"
 }
}