Componente de información sobre herramientas de ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente Tooltips en ReactJS MDBootstrap. La información sobre herramientas se utiliza para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando se mueve el puntero del mouse.

Propiedades:

• tag: Se utiliza para definir la etiqueta del wrapper
• tooltipTag: se utiliza para definir la etiqueta del elemento de información sobre herramientas
• className: se utiliza para agregar una clase personalizada a la información sobre herramientas
• wrapperClass: se utiliza para agregar una clase personalizada al contenedor de información sobre herramientas
• wrapperProps: se utiliza para agregar propiedades personalizadas al contenedor de información sobre herramientas
• opciones: Se utiliza para permitir cambiar la configuración predeterminada de Popper.
• colocación: se utiliza para establecer la posición de la información sobre herramientas.
• title: Se utiliza para definir el texto de información sobre herramientas.

Sintaxis:

<MDBTooltip title='GeeksforGeeks'>
    Hover here
</MDBTooltip>

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, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Paso 4: Importe el elemento que se utilizará en el proyecto.

import { MDBTooltip} from 'mdb-react-ui-kit'

Estructura del proyecto: Tendrá el siguiente aspecto.

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

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Tooltips.

import React from "react";
import { MDBTooltip } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Tooltip component</h4>
  
            <MDBTooltip wrapperProps={{ color: 'success' }} 
                title='GeeksforGeeks'>
                Hover here!
            </MDBTooltip>
        </div>
    );
}

Producción:

Ejemplo 2: en este ejemplo, sabremos cómo usar la propiedad de ubicación en un componente de información sobre herramientas.

import React from "react";
import { MDBTooltip } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Tooltip component</h4>
  
            <MDBTooltip placement="bottom" 
                wrapperProps={{ color: 'success' }} 
                title='GeeksforGeeks'>
                    Hover here!
            </MDBTooltip>
            <br />
            <br />
            <hr />
            <div id='a'>
                <MDBTooltip placement="left" 
                    wrapperProps={{ color: 'success' }} 
                    title='GeeksforGeeks' id='a'>
                        Hover here!
                </MDBTooltip>
            </div>
            <hr />
            <MDBTooltip placement="right" 
                wrapperProps={{ color: 'success' }} 
                title='GeeksforGeeks'>
                    Hover here!
            </MDBTooltip>
        </div>
    );
}

#gfg{
    margin: 40px;
}
#a{
    margin-left: 120px;;
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/components/tooltips/