Hover Card
Cross-platform extension. iOS 26 is touch-first and has no hover affordance — there is no system equivalent for a hover-triggered preview. The closest references are shadcn/ui and forui.dev. liqkit_ui ships this rendered in iOS 26 visual language (Liquid Glass surfaces, San Francisco type, iOS color palette) so it composes cleanly with the rest of the library on web/desktop targets, but the interaction model itself is web-native rather than iOS-canonical.
LiqHoverCard is an iOS 26 rich-content popover triggered by hovering
over a target. Common pattern: hover a username to see a preview of
the user's profile. The popover opens after a short openDelay and
dismisses after a small closeDelay once the pointer leaves both the
target and the popover surface — that delay lets the user move the
pointer from the target into the popover without it disappearing.
The popover auto-flips to the opposite edge if the preferred
LiqHoverCardPlacement would overflow the viewport.
Hover-only, by design — touch devices do not trigger the popover.
Default
// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';const TextStyle _linkStyle = TextStyle( fontFamily: 'SF Pro Text', fontFamilyFallback: <String>['SF Pro', 'sans-serif'], color: Color(0xFF007AFF), fontSize: 15, decoration: TextDecoration.underline,);const Widget _previewContent = SizedBox( width: 280, child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[ Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ LiqAvatar(initials: 'JD'), SizedBox(width: 12), SnippetLabel('Jane Doe', fontSize: 17, fontWeight: FontWeight.w600), ], ), SizedBox(height: 8), SnippetLabel( 'Senior engineer at liqkit. Lives in San Francisco.', fontSize: 13, ), ], ),);/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget hoverCardDefaultBuilder(BuildContext context) { return const SnippetFrame( height: 420, child: Align( alignment: Alignment.bottomCenter, child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ LiqHoverCard( content: _previewContent, child: Text( '@janedoe', textDirection: TextDirection.ltr, style: _linkStyle, ), ), SizedBox(height: 28), SnippetLabel( 'Hover the link with a mouse to reveal the card.', fontSize: 13, ), ], ), ), );}
Bottom
// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';const TextStyle _linkStyle = TextStyle( fontFamily: 'SF Pro Text', fontFamilyFallback: <String>['SF Pro', 'sans-serif'], color: Color(0xFF007AFF), fontSize: 15, decoration: TextDecoration.underline,);const Widget _previewContent = SizedBox( width: 280, child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: <Widget>[ Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ LiqAvatar(initials: 'JD'), SizedBox(width: 12), SnippetLabel('Jane Doe', fontSize: 17, fontWeight: FontWeight.w600), ], ), SizedBox(height: 8), SnippetLabel( 'Senior engineer at liqkit. Lives in San Francisco.', fontSize: 13, ), ], ),);/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget hoverCardBottomBuilder(BuildContext context) { return const SnippetFrame( height: 420, child: Align( alignment: Alignment.topCenter, child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ SizedBox(height: 72), LiqHoverCard( placement: LiqHoverCardPlacement.bottom, content: _previewContent, child: Text( '@janedoe', textDirection: TextDirection.ltr, style: _linkStyle, ), ), SizedBox(height: 12), SnippetLabel( 'Hover the link with a mouse to reveal the card.', fontSize: 13, ), ], ), ), );}