Tengo el siguiente código:
// 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;El problema es que cuando desmaximizo la ventana del navegador, la información sobre herramientas desaparece cuando el cursor se coloca más allá de la ventana del navegador. Además, la información sobre herramientas desaparece si se produce desplazamiento. Tengo que apuntar el cursor a la barra de navegación y luego volver a la aplicación web para que la información sobre herramientas vuelva a aparecer después de desplazarme.
¿Cómo podría hacer que la información sobre herramientas de reacción siempre sea visible sin importar qué?
Gracias por adelantado.
La información sobre herramientas de React viene con un atributo diferente que incluye scrollHide (el valor predeterminado es true ) y resizeHide (el valor predeterminado es true ).
Simplemente puede establecerlos en falso;
<ReactTooltip id={props.id} type="dark" place={props.place} scrollHide={false} resizeHide={false} className={classes.tooltip} > <span>{props.text}</span> </ReactTooltip>