El código jQuery se inyecta en el archivo raíz del proyecto React y ahora debe usarse a través del paquete NPM. alguien me puede ayudar o dar alguna sugerencia?
<script> $(document).ready(function() { $("body").tooltip({ selector: '[data-bs-toggle=tooltip]', trigger : 'hover', html:true }); }); function hideTooltip() { $(".tooltip").hide(); } </script>tu no No se recomienda usar jQuery dentro de una aplicación de reacción.
Como dice React en su documentación:
"El hecho de que sea posible no significa que sea el mejor enfoque para las aplicaciones de React. Lo alentamos a que use los componentes de React cuando pueda. Los componentes de React son más fáciles de reutilizar en las aplicaciones de React y, a menudo, brindan más control sobre su comportamiento y apariencia. ."
Puede lograr esto simplemente usando CSS (: hover & selector de hermanos adyacentes)
También puede usar una biblioteca que lo ayudará, no es necesario que reinvente la rueda.
Aquí hay un ejemplo de código para ilustrar mis palabras:
.tooltip-container { padding: 1rem; position: relative; } .tooltip-content { opacity: 0; visibility: hidden; background: #333; padding: 5px 10px; color: #fff; position: absolute; top: 0; left: 0; transition: all 0.3s; } .tooltip-hoverable:hover + .tooltip-content { opacity: 1; visibility: visible; } <div class="tooltip-container"> <p class="tooltip-hoverable"> Hover me </p> <span class="tooltip-content">I'm the tooltip</span> </div>podrías usar import $ from 'jquery'; y useEffect / componentDidmount
import { createRoot } from 'react-dom/client'; import TodoList from './refs/TodoList'; import { useEffect } from 'react'; import $ from 'jquery'; const App = () => { useEffect(() => { $("body").tooltip({ selector: '[data-bs-toggle=tooltip]', trigger : 'hover', html: true }); }, []) return ( <div> <TodoList /> </div>) }; const container = document.getElementById('root'); const root = createRoot(container!); root.render(<App />);