Accesorios de React Suite <Descripción emergente>

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente de información sobre herramientas permite al usuario mostrar texto informativo cuando los usuarios se desplazan, se enfocan o tocan un elemento. Los accesorios de información sobre herramientas se utilizan para agregar valores de propiedad al elemento de información sobre herramientas.

Accesorios de información sobre herramientas:

• niños: Se utiliza para denotar el contenido principal.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• visible: Se utiliza para indicar si el componente es visible o no.
• flecha : Si muestra el indicador de flecha

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto:

 

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. En este ejemplo, aprenderemos acerca de prop: arrow. Cuando se establece en falso, no mostrará una flecha.

import React from 'react'
  
import "rsuite/dist/rsuite.min.css";
import { Button, Tooltip, Whisper } from 'rsuite'
  
export default function App() {
  
    return (
        <div style={{
            display: 'block', width: 700, paddingLeft: 100
        }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>React Suite Tooltip Props</h3>
  
            <Whisper
                placement="right"
                speaker={<Tooltip arrow>Required Text</Tooltip>}
            >
                <Button appearance="subtle">With Arrow</Button>
            </Whisper>
            <br />
            <hr />
            <Whisper
                speaker={<Tooltip arrow={false}>
                    Required Text
                </Tooltip>}
            >
                <Button appearance="subtle">Without Arrow</Button>
            </Whisper>
        </div>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

 

Ejemplo 2: En este ejemplo, aprenderemos sobre otro accesorio; prefijo de clase. Verá cómo se cambiará el estilo de la información sobre herramientas como el de un marcador de posición.

import React from 'react'
  
import "rsuite/dist/rsuite.min.css";
import { Button, Tooltip, Whisper } from 'rsuite'
  
export default function App() {
  
    return (
        <div style={{
            display: 'block', width: 700, paddingLeft: 100
        }}>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>React Suite Tooltip Props</h3>
            <Whisper
                placement="right"
                speaker={<Tooltip classPrefix="tooltip">
                    Required Text
                </Tooltip>}
            >
                <Button appearance="subtle">Right</Button>
            </Whisper>
            <br />
            <hr />
            <Whisper
                speaker={<Tooltip classPrefix="placeholder">
                    Required Text
                </Tooltip>}
            >
                <Button appearance="subtle">Right</Button>
            </Whisper>
        </div>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/tooltip/#code-lt-tooltip-gt-code