Componente de información sobre herramientas de Blueprint de ReactJS

BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio.

La información sobre herramientas muestra información adicional durante las interacciones de desplazamiento, ya que se trata de una ventana emergente ligera. Podemos usar el siguiente enfoque en ReactJS para usar el componente de información sobre herramientas de Blueprint de ReactJS.

Accesorios de información sobre herramientas:

• autoFocus: se utiliza para indicar si la superposición debe adquirir el foco de la aplicación cuando se abre por primera vez o no.
• Contorno: se utiliza para determinar los elementos de contorno utilizados por Popper para sus modificadores flip y preventOverflow.
• canEscapeKeyClose: Se utiliza para indicar si al presionar la tecla esc se debe invocar onClose o no.
• captureDismiss: cuando el usuario hace clic dentro de un elemento Classes.POPOVER_DISMISS, solo se cerrará la ventana emergente actual y no las ventanas emergentes externas cuando se establece en verdadero.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• contenido: se utiliza para indicar el contenido que se mostrará dentro de la información sobre herramientas.
• defaultIsOpen: se utiliza para indicar el estado abierto inicial cuando no está controlado.
• disabled: se utiliza para evitar que aparezca el popover cuando es verdadero.
• enforceFocus: se utiliza para indicar si la superposición debe evitar que el foco se deje solo o no.
• hoverCloseDelay: se utiliza para indicar la cantidad de tiempo que la información sobre herramientas debe permanecer abierta después de que el usuario desplace el disparador en milisegundos.
• hoverOpenDelay: se utiliza para indicar la cantidad de tiempo que la información sobre herramientas debe esperar antes de abrirse después de que el usuario pasa el cursor sobre el gatillo en milisegundos.
• heredarDarkTheme: se usa para indicar si un popover que usa un Portal debe heredar automáticamente el tema oscuro de su padre o no.
• intención: se utiliza para indicar el color de la intención visual que se aplicará al elemento.
• tipo de interacción: se utiliza para indicar el tipo de interacción de desplazamiento que activa la visualización de la información sobre herramientas.
• isOpen: Se utiliza para indicar si el popover está visible o no.
• perezoso: el portal que contiene los elementos secundarios se crea y se adjunta al DOM cuando la superposición se abre por primera vez cuando se establece en verdadero y usePortal={true}.
• minimal: se utiliza para indicar si se aplica o no un estilo mínimo a esta ventana emergente o información sobre herramientas.
• modificadores: se utiliza para indicar las opciones del modificador popper, que se pasan directamente a la instancia interna de Popper.
• onClose: es una función de devolución de llamada que se activa cuando la interacción del usuario hace que se cierre la superposición, como hacer clic en la superposición o presionar la tecla esc.
• onClosed: se utiliza para indicar el método de ciclo de vida invocado justo después de que finaliza la transición de cierre de CSS, pero antes de que el elemento secundario haya sido eliminado del DOM.
• onClosing: se utiliza para indicar el método de ciclo de vida invocado justo antes de que comience la transición de cierre de CSS en un elemento secundario.
• onInteraction: es una función de devolución de llamada que se activa en modo controlado cuando el estado abierto del popover cambia debido a la interacción del usuario.
• onOpened: se utiliza para indicar el método de ciclo de vida invocado justo después de que finaliza la transición abierta de CSS.
• onOpening: se utiliza para indicar el método de ciclo de vida invocado justo después de montar el elemento secundario en el DOM, pero justo antes de que comience la transición abierta de CSS.
• openOnTargetFocus: se utiliza para indicar si el popover debe abrirse cuando su objetivo está enfocado o no.
• ubicación: se utiliza para la ubicación (en relación con el objetivo) en la que debe aparecer la ventana emergente.
• popoverClassName: se utiliza para indicar la string de nombres de clases delimitada por espacios que se aplica al elemento popover.
• portalClassName: se utiliza para indicar la string de nombres de clase delimitada por espacios que se aplica al elemento Portal si usePortal={true}.
• portalContainer: se utiliza para indicar el elemento contenedor en el que la superposición representa su contenido, cuando usePortal es verdadero.
• position: se utiliza para indicar la posición (en relación con el objetivo) en la que debe aparecer el popover.
• targetClassName: se utiliza para indicar la string de nombres de clases delimitada por espacios que se aplica al elemento de destino.
• targetProps: se utiliza para indicar los accesorios HTML que se propagarán al elemento de destino.
• targetTagName: se utiliza para indicar el nombre de la etiqueta HTML para el elemento de destino.
• TransitionDuration: se utiliza para indicar cuánto tiempo aparece/desaparece la información sobre herramientas en milisegundos.
• usePortal: se utiliza para indicar si el popover debe representarse dentro de un portal adjunto a portalContainer prop o no.
• wrapperTagName: se utiliza para denotar el nombre de la etiqueta HTML para el elemento contenedor, que también recibe la propiedad className.

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: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install @blueprintjs/core

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: 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.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tooltip, Button } from "@blueprintjs/core";
  
function App() {
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Tooltip Component</h4>
            <Tooltip content="I am sample tooltip info!" position='right'>
                <Button>Tooltip, Hover me</Button>
            </Tooltip>
        </div >
    );
}
  
export default App;

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:

Referencia: https://blueprintjs.com/docs/#core/components/tooltip