0

I am using CodeMirror for syntax highlighting. I'd like to fire a popup when the user clicks on the text. I'm using React Tippy - a React component based on Tippy.js.

Basically, I'm not getting any tippy popup. I'm also not getting any errors.

I have a sandbox example here: https://codesandbox.io/s/focused-currying-uo469

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;
maddie
  • 1,854
  • 4
  • 30
  • 66

1 Answers1

0

According to its document

"cursorActivity" (instance: CodeMirror) Will be fired when the cursor or selection moves, or any change is made to the editor content.

It will do nothing when you return an jsx element.

React Tooltip works as it will pop up and anchor to it's child component. thus you will need to warp it on top of Code Mirror to show up.

Here is an working version https://codesandbox.io/s/jovial-varahamihira-xg6ty?fontsize=14

Chris Chen
  • 1,228
  • 9
  • 14
  • Yes, you can probably achieve this by trigger a css update to the tooltip element by using element.style.transform with onCursorActivity. Since tooltip is using translate3d() to define its location. you will need to read and add it from the cursor location to css transform property – Chris Chen Sep 23 '19 at 04:08
  • Actually you can also enable "followCursor" from react-tippy api. Updated my codesandbox – Chris Chen Sep 23 '19 at 04:29
  • how would you do it with `element.style.transform`? I found a way to read tokens on hover but still having trouble with pushing a tippy on top of code editor (I don't want it to be triggered on click and then to jump up to follow cursor). This is my sandbox: https://codesandbox.io/s/focused-currying-uo469?fontsize=14 – maddie Sep 24 '19 at 15:53