18 Repos
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 18 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 ist eine WebGL-Globus-Bibliothek für interaktive 3D-Visualisierungen geografischer Daten. Sie fungiert als Canvas-basierte Kartenkomponente, die eine Weltkarte rendert und das Plotten von Breitengrad- und Längengrad-Koordinaten über Marker und verbindende Bögen ermöglicht. Die Bibliothek zeichnet sich dadurch aus, dass sie Standard-HTML-Elemente mittels CSS-Anchor-Positioning mit 3D-Koordinaten verknüpft. Diese Integration ermöglicht das Anheften von DOM-Elementen, wie Labels und Tooltips, direkt an Marker und Bögen auf der Kugel. Das System deckt das Plotten geografischer Daten und das Mapping von Netzwerkverbindungen ab und nutzt automatisierte Rotation sowie Benutzerinteraktionen, um räumliche Beziehungen darzustellen. Es handhabt die Projektion geografischer Koordinaten in den 3D-Raum und die Interpolation gekrümmter Pfade zwischen globalen Standorten.
Links HTML labels and tooltips to 3D markers using CSS anchor positioning.
Codehike ist ein React-basiertes Dokumentations-Framework und Tool für interaktive Code-Walkthroughs. Es fungiert als Markdown-Content-Orchestrator, der annotiertes Markdown in strukturierte Daten und React-Komponenten umwandelt und als Visualisierungsebene für das Hervorheben von Code-Bereichen, Diffs und Compiler-Fehlern dient. Das Projekt zeichnet sich durch die Fähigkeit aus, „Scrollycoding“-Erlebnisse und schrittweise technische Tutorials zu erstellen. Es bietet Animationen auf Token-Ebene, die visuell demonstrieren, wie sich Logik zwischen Code-Versionen entwickelt, und ermöglicht die Synchronisierung des UI-Zustands mit der Scroll-Position des Browsers. Das Framework deckt eine breite Palette an Visualisierungsfunktionen ab, darunter Code-Slideshows, Spotlight-Layouts und Code-Blöcke mit Tabs. Es unterstützt detaillierte Code-Annotationen durch Tooltips, Callouts und Fußnoten sowie funktionale Hilfsmittel wie Sprachumschalter, Code-Transpilierung und die Integration von Echtzeit-Compiler-Daten. Das System nutzt schema-basierte Validierung, um Typsicherheit und Konsistenz für die aus Markdown-Dateien extrahierten strukturierten Daten zu gewährleisten.
Displays interactive popovers containing rich content when hovering over specific code tokens.
balloon.css ist ein leichtgewichtiges, CSS-basiertes Framework für die Implementierung anpassbarer Tooltips und Text-Overlays. Es handelt sich um eine reine CSS-Bibliothek, die die Erstellung informativer Pop-up-Elemente ohne JavaScript-Laufzeitumgebung ermöglicht. Das Framework verwendet CSS-Variablen für die Anpassung von Farben, Schriftarten und Animationen. Tooltips können relativ zum Auslöser-Element in verschiedene Richtungen positioniert werden und unterstützen die Einbettung von Rich Content, wie HTML-Sonderzeichen und Icon-Fonts. Die Sichtbarkeit wird primär über Hover-Trigger gesteuert, das System unterstützt jedoch auch die programmgesteuerte Sichtbarkeit durch das Umschalten spezifischer HTML-Attribute. Die Rendering-Engine nutzt absolute Positionierung und Pseudo-Elemente, um Inhalte basierend auf Benutzerinteraktionen oder definierten Zuständen anzuzeigen.
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 ist eine JavaScript-Bibliothek und ein Framework zur Erstellung interaktiver Produkttouren und Onboarding-Guides für Nutzer. Es dient als Tool zum Aufbau schrittweiser Anleitungen, die spezifische Seitenelemente hervorheben und kontextbezogene Tooltips anzeigen, um Nutzern bei der Navigation durch Webanwendungsoberflächen zu helfen. Die Bibliothek fungiert als Tooltip-Orchestrator, der instruktive Sprechblasen an HTML-Elementen verankert, indem er deren Position innerhalb des Browser-Viewports berechnet. Sie unterstützt die Erstellung gebrandeter Touren durch die Verwendung benutzerdefinierter Stylesheets und Markup-Templates für visuelle Anpassungen. Das Framework beinhaltet Funktionen für das Sequenzmanagement und die Event-Integration, was es Entwicklern ermöglicht, während der Tour-Übergänge benutzerdefinierte JavaScript-Callbacks auszulösen, um den Guide mit Zustandsänderungen der Anwendung zu synchronisieren.
Anchors instructional bubbles to specific HTML elements by calculating their position in the browser viewport.
Dies ist eine Guided-Tour-Bibliothek und ein Onboarding-Framework für React-Anwendungen. Es bietet ein System zur Erstellung interaktiver Schritt-für-Schritt-Anleitungen unter Verwendung von elementverankerten Popovers und visuellen Maskierungstools, um spezifische Schnittstellenkomponenten hervorzuheben. Die Bibliothek konzentriert sich auf Barrierefreiheit und bietet integrierte Unterstützung für Screenreader und Tastaturnavigation, um ein inklusives Benutzer-Onboarding zu gewährleisten. Sie ermöglicht eine umfassende Anpassung durch den Austausch von Standard-Schnittstellenelementen, wie Badges und Buttons, durch benutzerdefinierte React-Komponenten. Das Framework deckt die Tour-Orchestrierung durch Zustandsverwaltung und selektorbasiertes Element-Targeting ab. Es enthält Funktionen für automatisches Viewport-Scrolling, Popover-Übergangsmanagement und die Möglichkeit, die Benutzerinteraktion mit der zugrunde liegenden Schnittstelle während eines Rundgangs einzuschränken.
Displays floating information panels anchored to specific interface elements to provide on-demand user guidance.
This project is a React tooltip component and CSS-driven library used to display descriptive text bubbles when users hover over or focus on specific elements. It functions as an accessible UI widget and customizable framework for managing informational popovers within React applications. The library distinguishes itself through flexible anchor management, allowing a single tooltip instance to be linked to multiple trigger elements via CSS selectors or HTML data attribute binding. It provides specific controls for visibility timing and animation, as well as the ability to disable automatic sty
Places tooltips relative to anchor elements using predefined directions and custom offsets.
Ace is a responsive admin template and UI component library built on Bootstrap 3. It provides a comprehensive framework for creating administrative dashboards with a grid-based layout system that adapts to various screen sizes. The project features a broad array of pre-styled layouts for administrative interfaces, including specialized page templates for user profiles, email clients, and real-time chat interfaces. It includes a configuration system for adjusting visual presentations through color skins and right-to-left mirroring support. The library covers a wide range of interface capabili
Provides tooltip components that contain actionable elements or interactive content with animations.
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.
Dieses Projekt ist ein Echtzeit-Strategie-Framework für die Godot-Engine, das eine grundlegende Vorlage für die Entwicklung isometrischer Strategietitel bietet. Es stellt eine Sammlung wiederverwendbarer Systeme bereit, die darauf ausgelegt sind, die Erstellung kompetitiver Spiele zu beschleunigen, einschließlich Unterstützung für menschliche und KI-Teilnehmer. Das Framework zeichnet sich durch eine umfassende Suite von Kernmechaniken aus, die auf das Echtzeit-Strategie-Genre zugeschnitten sind. Es enthält ein dediziertes Fog-of-War-System, das Kartenregionen basierend auf der Sichtlinie von Einheiten verdeckt, neben isometrischer Pfadfindung und Navigationslogik für Boden- und Lufteinheiten. Die Engine bietet zudem ein Rally-Point-System für Einheiten für automatisiertes Deployment sowie ein Match-Konfigurations-Dienstprogramm zur Definition von Regeln, Rostern und Kartenlayouts vor Sitzungsbeginn. Über diese Kernmechaniken hinaus bietet das Projekt eine vollständige Reihe von Gameplay-Systemen zur Verwaltung von Einheitenbefehlen und -kontrolle, zum Ausbalancieren der Ressourcenökonomie und zur Inventarverfolgung. Es enthält interaktive Interface-Komponenten wie Einheiten-Auswahlmanagement, taktische Minimaps und kontextbezogene Tooltips, um die Spielerinteraktion zu erleichtern. Das Framework enthält zudem Diagnosetools für Echtzeit-Leistungsüberwachung und unterstützt Multiplayer-Koordination für geteilte kompetitive Umgebungen.
Implements contextual UI tooltips that display descriptive information about resources and production tasks during player interaction.