Javascript 反应：倾斜按钮不显示onCursorActivity

我使用的是语法高亮显示。我想在用户点击文本时弹出一个窗口。我正在使用React Tippy-一个基于Tippy.js的React组件

基本上，我没有得到任何酒杯弹出。我也没有收到任何错误

我这里有一个沙箱示例：

从“React”导入React；
从“react dom”导入react dom；
导入“react tippy/dist/tippy.css”
进口{
工具提示，
}从“反应酒鬼”开始；
//导入“代码镜像扩展”
/*eslint无限制全局：“关闭”*/
函数App（）{
返回(
{
console.log（“tupppy”）；
返回(
);
}}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
导出默认应用程序；

根据其文档

光标移动时将触发“cursorActivity”（实例：CodeMirror） 或选择移动，或对编辑器内容进行任何更改

当您返回jsx元素时，它将不起任何作用

“反应”工具提示将弹出并锚定到其子组件。因此，您需要将其扭曲到代码镜像的顶部才能显示

这是一个工作版本

---

是的，您可以通过使用element.style.transform和onCursorActivity触发对tooltip元素的css更新来实现这一点。因为工具提示使用translate3d（）来定义其位置。您需要从游标位置读取并将其添加到css转换属性中。实际上，您还可以从react tippy api启用“followCursor”。更新了我的代码Sandbox您将如何使用

元素.style.transform

？我找到了一种在hover上读取标记的方法，但在代码编辑器顶部推一个小按钮时仍然有困难（我不希望它在单击时被触发，然后跳到光标后面）。这是我的沙箱：

import React from "react";
import ReactDOM from "react-dom";
import 'react-tippy/dist/tippy.css'
import {
  Tooltip,
} from 'react-tippy';
//import "codemirror-extension"
/* eslint no-restricted-globals: "off"*/



function App() {
  return (
    <div className="App">
      <CodeMirror
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          mode: "xml",
          theme: "material",
          lineNumbers: true
        }}
        onCursorActivity={(editor) => {
          console.log("tuppppy");
          return (
          <div id="parent">
            <Tooltip id="sib"
            trigger="click"
            html={(
              <div id="poop">
                <strong>
                  Hello
                </strong>
              </div>)}
            >
            </Tooltip>
            </div>
          );
        }}
        />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 export default App;