17 repositorios
Tooltip components that contain actionable elements or interactive content.
Distinct from Interactive UI Elements: Distinct from Interactive UI Elements: specifically identifies tooltips that act as mini-menus or action containers rather than generic actionable components.
Explore 17 awesome GitHub repositories matching user interface & experience · Interactive Tooltips. Refine with filters or upvote what's useful.
Tippy.js is a JavaScript tooltip library and interactive popup framework used to create tooltips, popovers, and dropdowns. It functions as a floating UI component toolkit that renders content relative to a reference element with support for automatic positioning, flip-positioning, and offsets. The library acts as an accessible overlay manager, using ARIA attributes and focus management to ensure screen reader compatibility. It also serves as a CSS animation tool, providing utilities for transitions, spring physics, and themes to manage the visual entry and exit of floating interface elements.
Provides multiple ways to attach informational popups to elements using CSS selectors, DOM elements, or data attributes.
Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design tokens, and guidelines for building professional web applications. It functions as a CSS framework that enforces a unified design language across projects through standardized typography, spacing, and color palettes. The system utilizes a platform-agnostic design token system to maintain visual consistency across different technologies. This includes centralized management of brand colors, motion easing curves, and a curated library of accessible SVG icons. The framework covers a
Provides interactive tooltips that allow users to perform actions directly within the popup content.
Tether is a DOM positioning engine designed to anchor floating user interface elements, such as tooltips and dropdowns, to target elements. It functions as a logic engine for managing the placement of overlays and synchronizing the position of secondary elements relative to primary anchors. The system includes collision detection and overflow prevention to ensure that floating menus and overlays remain within the visible viewport. It automatically repositions elements when they encounter page boundaries to prevent visual clipping. The tool manages dynamic element alignment and tracking durin
Links floating UI elements to targets using specific attachment points and DOM references.
This project is a JavaScript UI component library and frontend utility toolkit. It serves as a web modal framework and popup library, providing a specialized system for rendering interactive dialogs, overlays, and layered interfaces over web page content. The library is distinguished by its comprehensive set of overlay tools, including alert dialogs, confirmation prompts, and the ability to embed external content via iframes. It also features a responsive twelve-column grid system for cross-device layout compatibility and an internal modular dependency management system for on-demand loading
Provides small popup tips that anchor themselves to specific page elements.
XPopup is an Android popup UI framework and overlay component library used to build customizable dialogs, bottom sheets, and overlay views. It serves as a dialog engine for creating high-performance popup views and provides a toolkit for executing entrance and exit transitions. The library is distinguished by its ability to render ultra-long, high-resolution images using memory-efficient loading and drag-to-dismiss interactions. It supports displaying overlay views while an application is in the background through system overlay permissions. The framework covers anchor-based positioning for
Implements mechanisms for linking floating popups to target UI elements or touch points.
Provides interactive tooltips that show data details on hover, with a static SVG fallback.
Cobe es una librería de globos WebGL diseñada para la visualización interactiva de datos geográficos en 3D. Funciona como un componente de mapa basado en canvas que renderiza un mapa mundial, permitiendo el trazado de coordenadas de latitud y longitud mediante marcadores y arcos de conexión. La librería se distingue por vincular elementos HTML estándar a coordenadas 3D utilizando el posicionamiento de anclaje CSS. Esta integración permite adjuntar elementos DOM, como etiquetas y tooltips, directamente a marcadores y arcos en la esfera. El sistema cubre el trazado de datos geográficos y el mapeo de conexiones de red, utilizando rotación automatizada e interacciones de usuario para mostrar relaciones espaciales. Maneja la proyección de coordenadas geográficas en el espacio 3D y la interpolación de rutas curvas entre ubicaciones globales.
Links HTML labels and tooltips to 3D markers using CSS anchor positioning.
Codehike es un framework de documentación basado en React y una herramienta interactiva para recorridos de código. Funciona como un orquestador de contenido markdown que transforma markdown decorado en datos estructurados y componentes de React, sirviendo como capa de visualización para resaltar rangos de código, diffs y errores de compilación. El proyecto destaca por su capacidad para crear experiencias de "scrollycoding" y tutoriales técnicos paso a paso. Cuenta con animaciones a nivel de token que demuestran visualmente cómo evoluciona la lógica entre versiones de código y proporciona un sistema para sincronizar el estado de la UI con la posición del scroll del navegador. El framework cubre una amplia gama de capacidades de visualización, incluyendo la creación de presentaciones de código, diseños de spotlight y bloques de código con pestañas. Admite anotaciones detalladas mediante tooltips, callouts y notas al pie, así como utilidades funcionales como selectores de lenguaje, transpilación de código e integración de datos de compiladores en tiempo real. El sistema utiliza validación basada en esquemas para garantizar la seguridad de tipos y la consistencia de los datos estructurados extraídos de archivos markdown.
Displays interactive popovers containing rich content when hovering over specific code tokens.
balloon.css es un framework ligero basado en CSS para implementar tooltips y superposiciones de texto personalizables. Es una librería CSS pura que permite crear elementos emergentes informativos sin necesidad de un runtime de JavaScript. El framework utiliza variables CSS para permitir la personalización de colores, fuentes y animaciones. Los tooltips pueden posicionarse en direcciones específicas respecto a su elemento disparador y admiten la incrustación de contenido enriquecido, como caracteres especiales HTML y fuentes de iconos. La visibilidad se gestiona principalmente mediante disparadores hover, aunque el sistema admite visibilidad programática alternando atributos HTML específicos. El motor de renderizado utiliza posicionamiento absoluto y pseudo-elementos para mostrar el contenido según la interacción del usuario o estados definidos.
Displays small informational popups anchored to elements when a user hovers over them.
TagSpaces is an offline-first file tagging and organization platform that lets you manage local files with portable metadata stored directly in filenames or sidecar JSON files, eliminating the need for a central database. It functions as a full-text file search engine, a Kanban board file organizer, a local AI file assistant, an S3-compatible cloud file manager, and a web clipper and bookmark manager, all within a single application. The project distinguishes itself through a local-first architecture where all file operations, indexing, and AI processing run entirely on the device, with cloud
Provides an interactive tooltip in the search bar for guided query composition.
Hopscotch es una librería y framework de JavaScript para crear tours de productos interactivos y guías de onboarding de usuarios. Sirve como una herramienta para construir recorridos instructivos paso a paso que resaltan elementos específicos de la página y muestran tooltips contextuales para ayudar a los usuarios a navegar por las interfaces de aplicaciones web. La librería funciona como un orquestador de tooltips que ancla burbujas instructivas a elementos HTML calculando su posición dentro del viewport del navegador. Admite la creación de tours con marca propia mediante el uso de hojas de estilo personalizadas y plantillas de marcado para la personalización visual. El framework incluye capacidades para la gestión de secuencias e integración de eventos, permitiendo a los desarrolladores activar callbacks de JavaScript personalizados durante las transiciones del tour para sincronizar la guía con los cambios de estado de la aplicación.
Anchors instructional bubbles to specific HTML elements by calculating their position in the browser viewport.
Esta es una biblioteca de tours guiados y framework de onboarding para aplicaciones React. Proporciona un sistema para crear recorridos interactivos paso a paso utilizando popovers anclados a elementos y herramientas de enmascaramiento visual para resaltar componentes específicos de la interfaz. La biblioteca se centra en la accesibilidad, proporcionando soporte integrado para lectores de pantalla y navegación por teclado para asegurar un onboarding de usuario inclusivo. Permite una amplia personalización al permitir el reemplazo de elementos de interfaz predeterminados, como insignias y botones, por componentes React personalizados. El framework cubre la orquestación de tours mediante la gestión de estado y el targeting de elementos basado en selectores. Incluye capacidades para el desplazamiento automático del viewport, gestión de transiciones de popovers y la capacidad de restringir la interacción del usuario con la interfaz subyacente durante un recorrido.
Displays floating information panels anchored to specific interface elements to provide on-demand user guidance.
Balloon es un framework de tooltips y gestor de popups para Android utilizado para coordinar superposiciones informativas y guías contextuales. Proporciona un conjunto de herramientas para crear tooltips personalizables y animados anclados a elementos específicos de la UI, con soporte nativo para Jetpack Compose mediante modificadores y contenedores de estado. La biblioteca se distingue por su orquestación basada en secuencias, permitiendo que múltiples tooltips se muestren en cadena a través de diferentes vistas ancla. Incluye seguimiento basado en persistencia para limitar cuántas veces aparece un tooltip específico a un usuario y admite el oscurecimiento del fondo para resaltar vistas ancla específicas mientras se enmascara el resto de la UI. El framework cubre una amplia gama de capacidades de posicionamiento y estilo, incluyendo alineación dinámica de flechas, desplazamientos de coordenadas y formato avanzado de texto e iconos. Maneja eventos de interacción como la detección de toques fuera del área y callbacks de cierre, y utiliza una gestión consciente del ciclo de vida para cerrar automáticamente las superposiciones y evitar fugas de memoria.
Provides customizable, animated tooltips and popups anchored to UI elements in Jetpack Compose.
Makie.jl is a high-performance Julia data visualization library and hardware-accelerated plotting engine used to create interactive 2D and 3D visualizations. It functions as a reactive visualization framework where plots update automatically via observables and compute graphs, and as a vector graphics generator for high-resolution academic output. The system is distinguished by its backend-agnostic rendering pipeline, which supports OpenGL, WebGL, and ray-traced scenes. It employs a grammar-of-graphics approach to map variables to aesthetic attributes and utilizes a hierarchical scene graph t
Generates interactive data inspector tooltips that function as DOM elements within a web browser.
Unovis is a modular SVG and Canvas data visualization library used to build interactive charts, maps, and network graphs. It provides a framework-agnostic set of primitives for creating data dashboards and specialized visualizations. The library is distinguished by its dedicated toolkits for different visualization domains, including an XY charting library for coordinated plots, a network graph framework for relational data, and a geospatial visualization toolkit for TopoJSON-based mapping. Its capability surface covers a wide range of data representations, including linear, area, and bar ch
Ships interactive tooltip components that display custom text content tied to a crosshair cursor.
This project is a comprehensive design system framework and component library built for React. It provides a suite of modular, accessible, and themeable interface elements designed to maintain a unified visual language and brand alignment across complex web applications. By encapsulating interaction logic and styling within individual components, it enables developers to build consistent, responsive interfaces through declarative composition. The library distinguishes itself by prioritizing inclusive user experiences through built-in accessibility management, including standardized keyboard n
Renders floating labels that appear upon interaction to provide additional information or guidance without cluttering the view.
Este proyecto es un framework de juegos de estrategia en tiempo real construido para el motor Godot, proporcionando una plantilla fundamental para desarrollar títulos de estrategia isométrica. Ofrece una colección de sistemas reutilizables diseñados para acelerar la creación de juegos competitivos, incluyendo soporte para participantes humanos y de inteligencia artificial. El framework se distingue por un conjunto integral de mecánicas centrales adaptadas para el género de estrategia en tiempo real. Incluye un sistema dedicado de niebla de guerra que oscurece las regiones del mapa según la línea de visión de la unidad, junto con lógica de búsqueda de caminos y navegación isométrica para unidades terrestres y aéreas. El motor también cuenta con un sistema de puntos de reunión de estructuras para el despliegue automatizado de unidades y una utilidad de configuración de partidas para definir reglas, listas y diseños de mapas antes de que comiencen las sesiones. Más allá de estas mecánicas centrales, el proyecto proporciona un conjunto completo de sistemas de juego para gestionar el comando y control de unidades, el equilibrio de la economía de recursos y el seguimiento de inventario. Incluye componentes de interfaz interactivos como la gestión de selección de unidades, minimapas tácticos y tooltips contextuales para facilitar la interacción del jugador. El framework también incorpora herramientas de diagnóstico para el monitoreo del rendimiento en tiempo real y admite la coordinación multijugador para entornos competitivos compartidos.
Implements contextual UI tooltips that display descriptive information about resources and production tasks during player interaction.