docs: 更新 FAQ 和 文档示例 (#2276)

Co-authored-by: 卿珂 <lijinke.ljk@antgroup.com>

s2-site/docs/manual/advanced/interaction/basic.zh.md

@@ -229,6 +229,26 @@ const s2Options = {
 };
 ```
 
+:::warning{title='如何关闭悬停时出现的单元格黑色边框？'}
+:::
+
+```ts
+s2.setTheme({
+  dataCell: {
+    cell: {
+      interactionState: {
+        hoverFocus: {
+          // 边框设置为透明
+          borderColor: 'transparent'
+          // 或者边框透明度设置为 0
+          // borderOpacity: 0
+        }
+      }
+    }
+  }
+})
+```
+
 ### 圈选
 
 圈选又叫刷选，刷选过程中，会提示预选中的单元格，并且显示半透明的刷选蒙层，支持对 `数据单元格 (dataCell)`, `行头单元格 (rowCell)`, `列头单元格 (colCell)` 进行圈选，同时支持 `滚动圈选`, 可以用来做 `统计数据总和`, `单元格个数`, `复制选定数据` 等操作，默认开启 `数据单元格`，可配置 `brushSelection` 关闭：

s2-site/docs/manual/faq.zh.md

@@ -161,9 +161,55 @@ s2.render(false)
 
 请查看 [使用文档](/docs/manual/advanced/custom/cell-size#%E8%B0%83%E6%95%B4%E5%88%97%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E5%AE%BD%E9%AB%98) 和 [示例](/examples/gallery#category-%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%8C%E5%88%97%E5%AE%BD%E9%AB%98)
 
+### 如何关闭 hover 单元格出现的黑色边框？
+
+![preview](https://gw.alipayobjects.com/zos/antfincdn/nDIO0OG8fv/4ff6613f-fad3-4ea6-9473-0161509f692c.png)
+
+边框属于 `聚焦 (hoverFocus)` 交互状态的一种，可通过 [主题配置](https://s2.antv.antgroup.com/api/general/s2-theme#interactionstatetheme) 关闭
+
+```ts
+s2.setTheme({
+  dataCell: {
+    cell: {
+      interactionState: {
+        hoverFocus: {
+          // 边框设置为透明
+          borderColor: 'transparent'
+          // 或者边框透明度设置为 0
+          // borderOpacity: 0
+        }
+      }
+    }
+  }
+})
+```
+
+### React 组件，自定义显示 tooltip 后，内容未更新怎么回事？
+
+当手动调用实例方法 `s2.showTooltip` 时，如果内容是一个 React 自定义组件，且组件内容未更新时，可以尝试声明 `forceRender` 强制更新组件内容
+
+```ts
+s2.showTooltip({
+  ...,
+  content: <YourComponent props={"A"}/>
+})
+
+s2.showTooltip({
+  ...,
+  content: <YourComponent props={"B"} />
+  options: {
+    forceRender: true
+  }
+})
+```
+
+相关 issue: <https://github.com/antvis/S2/issues/1716>
+
 ### S2 支持对表格进行编辑吗？
 
-请查看 [编辑模式示例](/examples/case/data-preview#excel)
+请查看 [编辑模式示例](/examples/case/data-preview#excel) 和 [编辑表示例](https://s2.antv.antgroup.com/examples/react-component/sheet/#editable)
+
+目前只有 React 版本 `@antv/s2-react` 支持编辑表格，其他版本暂不支持，需参考 [源码](https://github.com/antvis/S2/blob/2d85d5739f5a3a52e92df699a935df93aa2a6a73/packages/s2-react/src/components/sheets/editable-sheet/index.tsx#L10) 自行实现
 
 ### S2 有对应的 `Vue` 或者 `Angular` 版本吗？
 

s2-site/examples/interaction/basic/demo/hover.ts

@@ -27,5 +27,21 @@ fetch(
     };
     const s2 = new PivotSheet(container, dataCfg, s2Options);
 
+    // 关闭悬停单元格时出现的 "黑色边框"
+    // s2.setTheme({
+    //   dataCell: {
+    //     cell: {
+    //       interactionState: {
+    //         hoverFocus: {
+    //           // 边框设置为透明
+    //           borderColor: 'transparent'
+    //           // 或者边框透明度设置为 0
+    //           // borderOpacity: 0
+    //         }
+    //       }
+    //     }
+    //   }
+    // })
+
     s2.render();
   });

s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx

@@ -31,7 +31,7 @@ fetch(
           x: value.event.clientX,
           y: value.event.clientY,
         };
-        spreadsheet.tooltip.show({
+        spreadsheet.showTooltip({
           position,
           content: <CustomTooltip />,
         });

s2-site/examples/react-component/tooltip/demo/custom-content.tsx

@@ -1,28 +1,57 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Button } from 'antd';
 import { SheetComponent } from '@antv/s2-react';
 import insertCss from 'insert-css';
 import '@antv/s2-react/dist/style.min.css';
 
+const CustomTooltip = <div className="tooltip-custom-component">content</div>;
+
+const RowTooltip = ({ title }) => (
+  <div className="tooltip-custom-component">{title}</div>
+);
+
+const ColTooltip = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className="tooltip-custom-component">
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        切换
+      </Button>
+      <span style={{ marginLeft: 4 }}>
+        {open ? 'colTooltip1' : 'colTooltip2'}
+      </span>
+    </div>
+  );
+};
+
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
 )
   .then((res) => res.json())
   .then((dataCfg) => {
-    const CustomTooltip = (
-      <div className="tooltip-custom-component">content</div>
-    );
-    const RowTooltip = (
-      <div className="tooltip-custom-component">rowTooltip</div>
-    );
-
     const s2Options = {
       width: 600,
       height: 480,
       tooltip: {
         content: CustomTooltip,
         row: {
-          content: RowTooltip,
+          content: (cell, defaultTooltipShowOptions) => {
+            console.log('当前单元格：', cell);
+            console.log('默认 tooltip 详细信息：', defaultTooltipShowOptions);
+
+            const meta = cell.getMeta();
+
+            return <RowTooltip title={meta.label} />;
+          },
+        },
+        col: {
+          content: <ColTooltip />,
         },
       },
     };