diff --git a/frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart b/frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart
index 43e7035e3896a..457c7c1914f80 100644
--- a/frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart
+++ b/frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart
@@ -1,6 +1,6 @@
 import 'package:appflowy/plugins/base/emoji/emoji_picker_header.dart';
-import 'package:appflowy/shared/icon_emoji_picker/emoji_skin_tone.dart';
 import 'package:appflowy/shared/icon_emoji_picker/emoji_search_bar.dart';
+import 'package:appflowy/shared/icon_emoji_picker/emoji_skin_tone.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -79,6 +79,7 @@ class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
             radius: Corners.s8Border,
             text: FlowyTooltip(
               message: name,
+              preferBelow: false,
               child: FlowyText.emoji(
                 emoji,
                 fontSize: 24.0,
diff --git a/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart b/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart
index 957c281d8a03d..a398db3061365 100644
--- a/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart
+++ b/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart
@@ -1,8 +1,5 @@
 import 'dart:io';
 
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/mobile/application/mobile_router.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
 import 'package:appflowy/shared/clipboard_state.dart';
@@ -26,6 +23,9 @@ import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
@@ -216,31 +216,41 @@ class _ApplicationWidgetState extends State<ApplicationWidget> {
               create: (_) => ClipboardState(),
               dispose: (_, state) => state.dispose(),
               child: ToastificationWrapper(
-                child: MaterialApp.router(
-                  builder: (context, child) => MediaQuery(
-                    // use the 1.0 as the textScaleFactor to avoid the text size
-                    //  affected by the system setting.
-                    data: MediaQuery.of(context).copyWith(
-                      textScaler: TextScaler.linear(state.textScaleFactor),
-                    ),
-                    child: overlayManagerBuilder(
-                      context,
-                      !UniversalPlatform.isMobile && FeatureFlag.search.isOn
-                          ? CommandPalette(
-                              notifier: _commandPaletteNotifier,
-                              child: child,
-                            )
-                          : child,
+                child: Listener(
+                  onPointerSignal: (pointerSignal) {
+                    /// This is a workaround to deal with below question:
+                    /// When the mouse hovers over the tooltip, the scroll event is intercepted by it
+                    /// Here, we listen for the scroll event and then remove the tooltip to avoid that situation
+                    if (pointerSignal is PointerScrollEvent) {
+                      Tooltip.dismissAllToolTips();
+                    }
+                  },
+                  child: MaterialApp.router(
+                    builder: (context, child) => MediaQuery(
+                      // use the 1.0 as the textScaleFactor to avoid the text size
+                      //  affected by the system setting.
+                      data: MediaQuery.of(context).copyWith(
+                        textScaler: TextScaler.linear(state.textScaleFactor),
+                      ),
+                      child: overlayManagerBuilder(
+                        context,
+                        !UniversalPlatform.isMobile && FeatureFlag.search.isOn
+                            ? CommandPalette(
+                                notifier: _commandPaletteNotifier,
+                                child: child,
+                              )
+                            : child,
+                      ),
                     ),
+                    debugShowCheckedModeBanner: false,
+                    theme: state.lightTheme,
+                    darkTheme: state.darkTheme,
+                    themeMode: state.themeMode,
+                    localizationsDelegates: context.localizationDelegates,
+                    supportedLocales: context.supportedLocales,
+                    locale: state.locale,
+                    routerConfig: routerConfig,
                   ),
-                  debugShowCheckedModeBanner: false,
-                  theme: state.lightTheme,
-                  darkTheme: state.darkTheme,
-                  themeMode: state.themeMode,
-                  localizationsDelegates: context.localizationDelegates,
-                  supportedLocales: context.supportedLocales,
-                  locale: state.locale,
-                  routerConfig: routerConfig,
                 ),
               ),
             );
@@ -267,7 +277,9 @@ class _ApplicationWidgetState extends State<ApplicationWidget> {
 
 class AppGlobals {
   static GlobalKey<NavigatorState> rootNavKey = GlobalKey();
+
   static NavigatorState get nav => rootNavKey.currentState!;
+
   static BuildContext get context => rootNavKey.currentContext!;
 }