41 repository-uri
UI elements that reveal rich preview content when triggered by a mouse hover.
Distinct from Hover State Trackers: Distinct from generic hover trackers or galleries; focuses on contextual content previews.
Explore 41 awesome GitHub repositories matching user interface & experience · Hover Previews. Refine with filters or upvote what's useful.
Brackets is an extensible JavaScript IDE and front-end code editor specifically designed for authoring HTML, CSS, and JavaScript. It serves as a web development text editor that provides a specialized environment for building websites. The editor is distinguished by its live preview capabilities, which render code changes in a browser in real time for immediate visual feedback. It further supports front-end workflows through inline style editing and the ability to synchronize code changes across multiple browser windows for cross-browser testing. The project includes a wide range of developm
Displays popover previews of colors, gradients, or images when hovering over their references in the code.
Plotly.js is a JavaScript charting library and interactive graphing framework used to create web-based visualizations. It functions as a high-performance data visualization engine that utilizes both SVG for static elements and WebGL for hardware-accelerated rendering of large datasets and complex 3D plots. The library is distinguished by specialized toolkits for financial analysis, such as candlestick and OHLC charts, and geographic mapping tools for rendering choropleth and scatter maps with custom projections. It also supports complex scientific visualizations, including Sankey diagrams, pa
Formats interactive data tooltips using templates with configurable positioning and styling.
Short CSS code snippets for all your development needs
Demonstrates a pure CSS image overlay that appears on hover with semi-transparent content.
al-folio is a Jekyll academic theme and portfolio generator designed for researchers and professors to build professional homepages, lab sites, and research profiles. It functions as a system for creating a digital academic identity, combining a website template with tools for scientific and academic publishing. The project distinguishes itself through specialized scholarly workflows, such as automated publication lists and bibliography management driven by BibTeX files. It provides specific layouts for digital academic CVs, research portfolios, and the rendering of mathematical expressions a
Generates numbered footnotes that display content in a tooltip when a user hovers over the reference link.
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.
Allows defining a base set of formatting and styling properties for all initialized tooltips.
gpui-component is a native desktop UI kit and component library built for the GPUI framework. It provides a collection of reusable user interface elements, a desktop layout engine for organizing application space, and a specialized data visualization library for rendering quantitative information. The project is distinguished by its high-performance rendering systems, including a virtualized data grid and list system designed to handle large datasets with low memory overhead. It also features a comprehensive data visualization toolkit for rendering charts, axes, and coordinate scales using li
Displays rich preview content when a mouse hovers over trigger elements.
Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a comprehensive kit of interactive elements and layout building blocks that follow screen reader and keyboard navigation standards. The project functions as a UI overlay management library, offering specialized tools for implementing anchored popovers, tooltips, and slide-out panels with smooth transitions. It includes a set of accessible form primitives and selection controls to ensure compatibility across different assistive technologies. Its broader capabilities cover the const
Renders rich preview content in popups when users hover over links.
Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range
Implements UI elements that reveal rich content previews when triggered by a mouse hover.
GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a
Displays informational tooltips as rich content previews when a user hovers over a diagram object.
Hexo Theme Butterfly is a visual template for Hexo that transforms Markdown content into a responsive website featuring card-based layouts. It functions as a technical content renderer capable of displaying complex data such as mathematical formulas, Mermaid diagrams, and interactive charts within blog posts. The interface is PWA enabled, utilizing service workers and manifest files to provide offline access and installation on mobile devices. The theme distinguishes itself through a wide array of specialized content rendering tools, including musical score rendering, chronological timelines,
Shows article introductions in rich previews when hovering over links.
shadcn-svelte is a collection of accessible and customizable user interface elements for Svelte applications. Rather than being distributed as a traditional dependency, these components are provided as source code that is copied directly into the project codebase. The library utilizes a registry-based distribution system, allowing users to install specific UI blocks and components via a command-line interface. This system uses JSON metadata to define dependencies and file paths, while a bootstrapping process automates the configuration of styles and CSS variables. The project integrates Tail
Provides UI elements that reveal rich preview content when triggered by a mouse hover.
This project is a Zotero note management plugin that functions as a knowledge base orchestrator. It enables the creation of networked research notes through bidirectional linking between annotations and notes, providing a system for organizing and editing research directly within the Zotero environment. The tool distinguishes itself through a bidirectional synchronization system that keeps internal Zotero notes and external Markdown files consistent. It further integrates a conversational interface with large language models to assist in generating, summarizing, and modifying note content, an
Displays the content of linked notes in a preview window when hovering over links.
snacks.nvim is a comprehensive collection of quality-of-life plugins and utilities designed to extend the core functionality of Neovim. It serves as a multi-purpose toolkit providing a UI framework, navigation enhancements, and integrations with external services. The project distinguishes itself by combining a wide array of specialized tools into a single suite, including a picker-based file explorer, a deep GitHub integration for managing issues and pull requests, and a set of development utilities for profiling Lua performance and inspecting code execution. Its broader capability surface
Displays an image preview in a floating window when the cursor is positioned over a file path.
React Native Gesture Handler is a declarative library that exposes the platform's native touch and gesture system to React Native, enabling smooth, deterministic gesture handling on the UI thread. It manages gesture recognition through a native state machine with defined transitions between states like BEGAN, ACTIVE, END, and CANCELLED, routing touch events through platform-native gesture recognizers on both iOS and Android. The library provides a comprehensive gesture composition framework that allows developers to combine multiple gestures into race, simultaneous, or exclusive sequences, co
Recognizes when a mouse or stylus hovers above a view to enable hover-based interactions.
Google map library for react that allows rendering components as markers :tada:
Displays floating tooltips on marker hover to show details even when zoomed out.
google-map-react is a JavaScript library that integrates Google Maps into React applications by rendering any React component as a custom map marker. It provides direct access to the native Google Maps API internals, enabling advanced custom operations beyond standard marker placement. The library distinguishes itself by allowing fully custom interactive markers and content, replacing default Google Maps markers and balloons with React components. It supports server-side rendering so search engines can index map content without requiring JavaScript, and includes an internal algorithm for dete
Detects hover events on map objects using an internal algorithm, even when zoomed out.
Rickshaw is a JavaScript library for building interactive, SVG-based time series charts in the browser. It provides a framework for rendering line, area, bar, and scatterplot visualizations from data series, with built-in support for axes, legends, color palettes, and interactive controls. The library distinguishes itself through a plugin-based architecture that allows renderers to be swapped at runtime, such as switching between stacked area and line chart views while preserving chart state. It includes an event-driven interaction layer for hover details, click behaviors, and drag-based rang
Displays series values and formatted timestamps when hovering over a data point on the graph.
instant.page is a client-side JavaScript library that preloads linked pages on hover or touch interactions, making navigation feel instantaneous without consuming unnecessary bandwidth. It works by starting to fetch a page the moment a user hovers over a link for 65 milliseconds, leaving over 300 milliseconds for the page to load before the click, and similarly preloads on touch start for mobile visitors. The script offers multiple preloading strategies to balance responsiveness with resource conservation. It can be configured to preload on mousedown, when links become visible in the viewport
Starts loading a linked page when the user hovers over it for 65 milliseconds, leaving over 300 ms for the page to load before the click.
MapCN is a React component library that wraps MapLibre GL into declarative, composable building blocks for interactive maps. It provides a set of small, reusable components for rendering maps, placing markers, drawing routes, and clustering points, all managed through React hooks, context, and refs for state and lifecycle control. The library distinguishes itself by offering a complete set of map features as individual React components that automatically adapt to light and dark themes. It includes components for interactive map rendering with zero configuration, marker placement with popups a
Display a floating content box when the user hovers over a marker, which auto-dismisses on hover out.
Provides configurable tooltip fields, formatting, and styling for map markers.