Make react-tooltip always visible

Question

I have following code:

// App.js
useEffect(() => {
    ReactTooltip.rebuild()
}, [])

// index.html
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="tooltip" data-for="tooltipStep" data-tip="tooltipStep_1"></div>
    <div id="root"></div>
  </body>

// MyTooltip.js
import ReactTooltip from "react-tooltip";
import ReactDOM from "react-dom";
import React from "react";
import classes from './MyTooltip.module.css';

const MyTooltip = (props) => 
  <React.Fragment>
    {
      ReactDOM.createPortal(
        <div>
          <div className={classes.backdrop} />
          <ReactTooltip
            id={props.id}
            type="dark"
            place={props.place}
            className={classes.tooltip}
          >
            <span>{props.text}</span>
          </ReactTooltip>
        </div>
      ,
      document.getElementById("tooltip")
    )}
  </React.Fragment>

export default MyTooltip;

The problem is that when I unmaximize the browser window, tooltip disappears when cursor is positioned beyond the browser window. Also tooltip disappears if scrolling occurs. I have to point cursor to the navigation bar and then back to the webapp for tooltip to show up again after scrolling.

How could I make react-tooltip always visible no matter what?

Thanks in advance.

score 3 · Answer 1 · edited Nov 18 '21 at 21:17

3

React tooltip comes with different attribute that includes scrollHide (default is true) and resizeHide (default is true).

You can just set them to false;

<ReactTooltip
    id={props.id}
    type="dark"
    place={props.place}
    scrollHide={false}
    resizeHide={false}
    className={classes.tooltip}
>
    <span>{props.text}</span>
</ReactTooltip>

edited Nov 18 '21 at 21:17

DaggeJ

2,094
1
10
22

answered Nov 18 '21 at 12:02

abhi patil

504
2
11

I tried to apply your recommendation, but this case is still unresolved: `The problem is that when I unmaximize the browser window, tooltip disappears when cursor is positioned beyond the browser window`. Tooltip does not disappear on scrolling now though. – altern Nov 18 '21 at 12:30
1

Try setting clickable also! – DaggeJ Nov 18 '21 at 13:54
Clickable has been set, but it does not help unfortunately. – altern Nov 19 '21 at 07:47

Make react-tooltip always visible

1 Answers1