在Flutter中定位工具提示

Question

我使用了一个工具提示小部件，其中包含自定义小部件。工具提示出现在小部件下方。我该如何将其放置在小部件右侧？

class MenuItemWithTooltip extends StatelessWidget {
  const MenuItemWithTooltip({
    required this.item,
    required this.title,
    Key? key,
  }) : super(key: key);
  final MenuItem item;
  final String title;

  @override
  Widget build(BuildContext context) {
    return Tooltip(
      decoration: BoxDecoration(
        color: Theme.of(context).backgroundColor,
        borderRadius: const BorderRadius.all(Radius.circular(3)),
      ),
      margin: const EdgeInsets.only(left: 55),
      textStyle: text12W400.copyWith(color: Colors.white),
      child: item,
      message: title,
    );
  }
}

- arcthurus

---

我认为这可能不太可能，至少没有任何技巧是不可能的。调整要么在下面，要么在上面，以及垂直偏移量，我打赌你已经知道了。 - user18309290

Answer 1

修改verticalOffset和margin的值可以实现这样的效果。

Tooltip(
      verticalOffset: -13,
      margin:EdgeInsets.only(left: 15),
      message: "xxx",
      child:...)

测试

- Xiaoshuyui

Answer 2

关于定位Tooltip，它不会超出将preferBelow设置为true或false并添加偏移量或填充的范围，这将使其出现在小部件的底部或顶部。

如果您想要更多的自定义，您必须使用OverlayEntry在小部件上悬停，然后在某些条件或持续时间后隐藏它。比起简单地使用Tooltip，这会更麻烦。但是可以根据您的需求调整对齐方式。

一些简化工作叠加层的包值得一看：

https://pub.dev/packages/modals

https://pub.dev/packages/flutter_portal

- Olga

Answer 3

那个包可以帮助你解决这个问题。

just_the_tooltip

- Cícero Moura