liqkit_ui
Status

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,          ),        ],      ),    ),  );}

On this page