javascriptreactjscodemirrortippyjsreact-codemirror

React: Tippy button not displaying onCursorActivity

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;
Solution

  • 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