Back to Details

shadcn_ui-tooltip

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Tooltip

Shadcn UI — 提示框

Instructions

使用说明

ShadTooltip
shows a popup when the element receives keyboard focus or the mouse hovers over it. Use 
builder: (context) => ...
to build the tooltip content (e.g. 
Text('Add to library')
) and 
child
for the trigger widget. Hover works only if the child uses a 
ShadGestureDetector
; 
ShadButton
and similar components implement it. For a plain widget (e.g. image), wrap the child with 
ShadGestureDetector
so the tooltip shows on hover.
ShadTooltip
会在元素获得键盘焦点或鼠标悬浮时弹出提示框。使用
builder: (context) => ...
来构建提示框内容（例如
Text('添加到库')
），
child
则为触发组件。只有当子组件使用
ShadGestureDetector
时，悬浮触发才会生效；
ShadButton
及类似组件已实现该功能。对于普通组件（如图片），请用
ShadGestureDetector
包裹子组件，以实现悬浮显示提示框的效果。

Basic

Basic

dart
ShadTooltip(
  builder: (context) => const Text('Add to library'),
  child: ShadButton.outline(
    child: const Text('Hover/Focus'),
    onPressed: () {},
  ),
)
For a non-interactive child (e.g. 
Image
), wrap with 
ShadGestureDetector
:
dart
ShadTooltip(
  builder: (context) => const Text('Description'),
  child: ShadGestureDetector(
    child: Image.network('...'),
  ),
)
dart
ShadTooltip(
  builder: (context) => const Text('Add to library'),
  child: ShadButton.outline(
    child: const Text('Hover/Focus'),
    onPressed: () {},
  ),
)
对于非交互式子组件（如
Image
），请用
ShadGestureDetector
进行包裹：
dart
ShadTooltip(
  builder: (context) => const Text('Description'),
  child: ShadGestureDetector(
    child: Image.network('...'),
  ),
)