18 个仓库
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 是一个 WebGL 地球仪库,专为交互式 3D 地理数据可视化而设计。它作为一个基于 Canvas 的地图组件,用于渲染世界地图,并通过标记和连接弧线来绘制经纬度坐标。 该库的特色在于使用 CSS 锚点定位将标准 HTML 元素链接到 3D 坐标。这种集成使得可以将 DOM 元素(如标签和工具提示)直接附加到球体上的标记和弧线上。 该系统涵盖了地理数据绘制和网络连接映射,利用自动旋转和用户交互来显示空间关系。它处理地理坐标到 3D 空间的投影,以及全球位置之间弯曲路径的插值。
Links HTML labels and tooltips to 3D markers using CSS anchor positioning.
Codehike 是一个基于 React 的文档框架和交互式代码演练工具。它作为一个 Markdown 内容编排器,将修饰后的 Markdown 转换为结构化数据和 React 组件,作为用于高亮代码范围、差异和编译器错误的可视化层。 该项目的特点是能够创建“滚动代码”(scrollycoding)体验和分步技术教程。它具有标记级动画,可直观地演示逻辑如何在代码版本之间演变,并提供了一个将 UI 状态与浏览器滚动位置同步的系统。 该框架涵盖了广泛的可视化功能,包括创建代码幻灯片、聚光灯布局和选项卡式代码块。它支持通过工具提示、标注和脚注进行详细的代码注释,以及语言切换器、代码转译和实时编译器数据集成等功能实用程序。 该系统利用基于模式的验证来确保从 Markdown 文件中提取的结构化数据的类型安全性和一致性。
Displays interactive popovers containing rich content when hovering over specific code tokens.
balloon.css 是一个轻量级的 CSS 框架,用于实现可定制的工具提示(tooltip)和文本覆盖层。它是一个纯 CSS 库,无需 JavaScript 运行时即可创建信息丰富的弹出元素。 该框架使用 CSS 变量来支持颜色、字体和动画的自定义。工具提示可以相对于触发元素在特定方向上定位,并支持嵌入富文本内容,如 HTML 特殊字符和图标字体。 可见性主要通过悬停触发器管理,但系统也支持通过切换特定的 HTML 属性来实现程序化控制。渲染引擎利用绝对定位和伪元素,根据用户交互或定义的各种状态来显示内容。
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 是一个用于创建交互式产品导览和用户入职指南的 JavaScript 库和框架。它作为一个构建分步教学演练的工具,突出显示特定的页面元素并显示上下文工具提示,以帮助用户导航 Web 应用界面。 该库作为一个工具提示编排器,通过计算 HTML 元素在浏览器视口中的位置,将教学气泡锚定到这些元素上。它支持通过使用自定义样式表和标记模板进行视觉定制,从而创建品牌化的导览。 该框架包括序列管理和事件集成功能,允许开发人员在导览过渡期间触发自定义 JavaScript 回调,以将指南与应用状态更改同步。
Anchors instructional bubbles to specific HTML elements by calculating their position in the browser viewport.
这是一个用于 React 应用程序的引导导览库和入职框架。它提供了一个系统,用于使用元素锚定的气泡提示和视觉遮罩工具创建交互式、分步式的演练,以突出显示特定的界面组件。 该库专注于可访问性,提供对屏幕阅读器和键盘导航的内置支持,以确保包容性的用户入职体验。它允许通过将默认界面元素(如徽章和按钮)替换为自定义 React 组件来实现广泛的自定义。 该框架涵盖了通过状态管理和基于选择器的元素定位进行的导览编排。它包括自动视口滚动、气泡提示过渡管理,以及在演练期间限制用户与底层界面交互的能力。
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.
This project is a real-time strategy game framework built for the Godot engine, providing a foundational template for developing isometric strategy titles. It offers a collection of reusable systems designed to accelerate the creation of competitive games, including support for both human and artificial intelligence participants. The framework distinguishes itself through a comprehensive suite of core mechanics tailored for the real-time strategy genre. It includes a dedicated fog-of-war system that obscures map regions based on unit line-of-sight, alongside isometric pathfinding and navigati
Implements contextual UI tooltips that display descriptive information about resources and production tasks during player interaction.