Quiero una información sobre herramientas en la etiqueta span o p, pero para mí esto solo funciona en la etiqueta Button. Estoy usando el complemento SortableTree pero eso no es más importante:
<SortableTree nodeContentRenderer={NodeRenderer} treeData={treeDataFirst} onMoveNode={() => this.test()} onChange={(treeDataFirst) => this.setState({ treeDataFirst }) } isVirtualized={false} canDrag={false} generateNodeProps={({ node, path }) => { return { title: ( <OverlayTrigger placement="right" overlay={node.title} id={`id${node}`} > <Button> {node.title} </Button> </OverlayTrigger> ), id: "left-tree", }; }} />Aquí funciona pero cuando se establece..
<SortableTree nodeContentRenderer={NodeRenderer} treeData={treeDataFirst} onMoveNode={() => this.test()} onChange={(treeDataFirst) => this.setState({ treeDataFirst }) } isVirtualized={false} canDrag={false} generateNodeProps={({ node, path }) => { return { title: ( <OverlayTrigger placement="right" overlay={node.title} id={`id${node}`} > <span> // OR <p> TAG NO WORK {node.title} </>> </OverlayTrigger> ), id: "left-tree", }; }} />¿Cómo puedo solucionar esto?
Quiero que la etiqueta hover p me muestre el texto
Estoy usando la superposición de información sobre herramientas de React Bootstrap.
En los documentos de ReactBootstrap, se ha documentado cómo personalizar overlaytrigger
https://react-bootstrap.netlify.app/components/overlays/#customizing-trigger-behavior
Jugando un poco allí, descubrí que necesitarías pasar accesorios ref y triggerHandler a tu etiqueta span.
render( <OverlayTrigger placement="bottom" overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>} > // use ref and triggerHandler {({ ref, ...triggerHandler }) => ( <span className="ms-1" ref={ref} {...triggerHandler}>Hover to see</span> )} </OverlayTrigger>, );