Componente ReactJS Blueprint Tooltip2

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.

Tooltip2how información adicional durante las interacciones de desplazamiento, ya que es una ventana emergente liviana. Podemos usar el siguiente enfoque en ReactJS para usar el componente ReactJS Blueprint Tooltip2.

Accesorios Tooltip2:

• autoFocus: se utiliza para indicar si la superposición debe adquirir el foco de la aplicación cuando se abre por primera vez.
• límite: se utiliza para denotar un elemento de límite proporcionado a los modificadores flip y preventOverflow .
• canEscapeKeyClose: Se utiliza para indicar si al pulsar la tecla ESC se debe invocar onClose .
• captureDismiss: cuando un usuario hace clic dentro de un elemento Classes.POPOVER_DISMISS , solo se cerrará la ventana emergente actual y no las ventanas emergentes externas cuando esta propiedad esté habilitada.
• 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 abandone.
• hoverCloseDelay: se utiliza para indicar la cantidad de tiempo en milisegundos que la información sobre herramientas debe permanecer abierta después de que el usuario desplace el disparador.
• hoverOpenDelay: se utiliza para indicar la cantidad de tiempo en milisegundos que la información sobre herramientas debe esperar antes de abrirse después de que el usuario pasa el cursor sobre el activador.
• heredarDarkTheme: se usa para indicar si un popover que usa un Portal debe heredar automáticamente el tema oscuro de su padre.
• 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.
• perezoso: el portal que contiene los elementos secundarios se crea y se adjunta al DOM cuando se abre la superposición por primera vez cuando se establece en verdadero y usePortal es verdadero.
• minimal: se utiliza para indicar si se debe aplicar un estilo mínimo a esta ventana emergente o información sobre herramientas.
• modificadores: se utiliza para anular los modificadores incorporados de Popper.js.
• onClose: es una devolución de llamada que se activa cuando la interacción del usuario hace que se cierre la superposición.
• onClosed: se utiliza para indicar un 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 un 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 un método de ciclo de vida invocado justo después de que finaliza la transición abierta de CSS.
• onOpening: se utiliza para indicar un 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 usa para indicar si el popover debe abrirse cuando su objetivo está enfocado.
• ubicación: se utiliza para indicar la ubicación en la que debe aparecer el popover.
• popoverClassName: se utiliza para denotar una string delimitada por espacios de nombres de clase aplicados al elemento emergente.
• portalClassName: se utiliza para denotar una string delimitada por espacios de nombres de clase aplicados al elemento Portal si usePortal es verdadero.
• 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 la que debe aparecer el popover. Mutuamente excluyentes con prop de colocación.
• renderTarget: se utiliza para indicar el renderizador de destino que recibe accesorios inyectados por Popover2 que deben distribuirse en el elemento renderizado.
• rootBoundary: se utiliza para indicar un elemento de límite raíz suministrado a los modificadores flip y preventOverflow .
• 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.

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 @blueprintjs/core
  npm install @blueprintjs/popover2

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 { Button, mergeRefs } from "@blueprintjs/core";
import { Popover2, Tooltip2 } from "@blueprintjs/popover2";
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 400, padding: 30
        }}>
            <h4>ReactJS Blueprint Tooltip2 Component</h4>
            <Popover2
                content={<h1>Popover!</h1>}
                renderTarget={({ isOpen: isPopoverOpen,
                    ref: ref1, ...popoverProps }) => (
                    <Tooltip2
                        content="Sample Tooltip 2 Content"
                        disabled={isPopoverOpen}
                        renderTarget={({ isOpen: isTooltipOpen,
                            ref: ref2, ...tooltipProps }) => (
                            <Button
                                active={isPopoverOpen}
                                {...popoverProps}
                                {...tooltipProps}
                                text="Hover Me to see ToolTip!"
                                elementRef={mergeRefs(ref1, ref2)}
                            />
                        )}
                    />
                )}
            />
        </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/#popover2-package/tooltip2