Merge pull request #560 from toeverything/feat/tooltip-quick-search

Feat/tooltip quick search

packages/app/src/components/header/quick-search-button.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconButton, IconButtonProps } from '@/ui/button';
+import { Tooltip } from '@/ui/tooltip';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/global-modal-provider';
 
@@ -10,15 +11,17 @@ export const QuickSearchButton = ({
   const { triggerQuickSearchModal } = useModal();
 
   return (
-    <IconButton
-      {...props}
-      onClick={e => {
-        onClick?.(e);
-        triggerQuickSearchModal();
-      }}
-    >
-      <ArrowDownIcon />
-    </IconButton>
+    <Tooltip content="Search and quickly jump to a page" placement="bottom">
+      <IconButton
+        {...props}
+        onClick={e => {
+          onClick?.(e);
+          triggerQuickSearchModal();
+        }}
+      >
+        <ArrowDownIcon />
+      </IconButton>
+    </Tooltip>
   );
 };
 

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -69,13 +69,15 @@ export const WorkSpaceSliderBar = () => {
   return (
     <>
       <StyledSliderBar show={show}>
-        <StyledListItem
-          onClick={() => {
-            triggerQuickSearchModal();
-          }}
-        >
-          <SearchIcon /> Quick search
-        </StyledListItem>
+        <Tooltip content="Search and quickly jump to a page" placement="right">
+          <StyledListItem
+            onClick={() => {
+              triggerQuickSearchModal();
+            }}
+          >
+            <SearchIcon /> Quick search
+          </StyledListItem>
+        </Tooltip>
         <Link href={{ pathname: '/page-list/all' }}>
           <StyledListItem active={router.pathname === '/page-list/all'}>
             <AllPagesIcon /> All pages