awesome-repositories.com
Blog
awesome-repositories.com

Descoperă cele mai bune repository-uri open source cu căutare AI.

ExploreazăCăutări recomandateAlternative open-sourceSoftware self-hostedBlogHartă site
ProiectDespreCum realizăm clasamentulPresăServer MCP
LegalConfidențialitateTermeni
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

41 repository-uri

Awesome GitHub RepositoriesHover Previews

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.

Awesome Hover Previews GitHub Repositories

Găsește cele mai bune repo-uri cu AI.Vom căuta cele mai potrivite repository-uri folosind AI.
  • adobe/bracketsAvatar adobe

    adobe/brackets

    33,033Vezi pe GitHub↗

    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.

    JavaScript
    Vezi pe GitHub↗33,033
  • plotly/plotly.jsAvatar plotly

    plotly/plotly.js

    18,227Vezi pe GitHub↗

    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.

    JavaScriptcharting-librarychartsd3
    Vezi pe GitHub↗18,227
  • chalarangelo/30-seconds-of-cssAvatar Chalarangelo

    Chalarangelo/30-seconds-of-css

    16,021Vezi pe GitHub↗

    Short CSS code snippets for all your development needs

    Demonstrates a pure CSS image overlay that appears on hover with semi-transparent content.

    CSScsscss-snippetseducation
    Vezi pe GitHub↗16,021
  • alshedivat/al-folioAvatar alshedivat

    alshedivat/al-folio

    15,759Vezi pe GitHub↗

    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.

    HTMLacademicacademic-websitegithub-pages
    Vezi pe GitHub↗15,759
  • atomiks/tippyjsAvatar atomiks

    atomiks/tippyjs

    12,270Vezi pe GitHub↗

    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.

    JavaScriptcomboboxdropdownmenu
    Vezi pe GitHub↗12,270
  • longbridge/gpui-componentAvatar longbridge

    longbridge/gpui-component

    11,793Vezi pe GitHub↗

    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.

    Rustdesktop-applicationgpuirust
    Vezi pe GitHub↗11,793
  • cosscom/cossAvatar cosscom

    cosscom/coss

    10,125Vezi pe GitHub↗

    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.

    TypeScriptnextjsradix-uireact
    Vezi pe GitHub↗10,125
  • mui/base-uiAvatar mui

    mui/base-ui

    8,711Vezi pe GitHub↗

    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.

    TypeScriptaccessibilitydesign-systemreact
    Vezi pe GitHub↗8,711
  • northwoodssoftware/gojsAvatar NorthwoodsSoftware

    NorthwoodsSoftware/GoJS

    8,447Vezi pe GitHub↗

    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.

    HTMLcanvaschartcharts
    Vezi pe GitHub↗8,447
  • jerryc127/hexo-theme-butterflyAvatar jerryc127

    jerryc127/hexo-theme-butterfly

    8,316Vezi pe GitHub↗

    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.

    JavaScriptbutterflyhexohexo-theme
    Vezi pe GitHub↗8,316
  • huntabyte/shadcn-svelteAvatar huntabyte

    huntabyte/shadcn-svelte

    8,341Vezi pe GitHub↗

    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.

    TypeScriptbits-uishadcn-svelteshadcn-ui
    Vezi pe GitHub↗8,341
  • windingwind/zotero-better-notesAvatar windingwind

    windingwind/zotero-better-notes

    7,893Vezi pe GitHub↗

    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.

    TypeScriptaddonknowledgemarkdown
    Vezi pe GitHub↗7,893
  • folke/snacks.nvimAvatar folke

    folke/snacks.nvim

    7,747Vezi pe GitHub↗

    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.

    Lua
    Vezi pe GitHub↗7,747
  • software-mansion/react-native-gesture-handlerAvatar software-mansion

    software-mansion/react-native-gesture-handler

    6,755Vezi pe GitHub↗

    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.

    TypeScriptgesturejavascriptreact-native
    Vezi pe GitHub↗6,755
  • istarkov/google-map-reactAvatar istarkov

    istarkov/google-map-react

    6,470Vezi pe GitHub↗

    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.

    JavaScript
    Vezi pe GitHub↗6,470
  • google-map-react/google-map-reactAvatar google-map-react

    google-map-react/google-map-react

    6,470Vezi pe GitHub↗

    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.

    JavaScriptcomponentgooglemap
    Vezi pe GitHub↗6,470
  • shutterstock/rickshawAvatar shutterstock

    shutterstock/rickshaw

    6,520Vezi pe GitHub↗

    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.

    JavaScriptchartsd3graph
    Vezi pe GitHub↗6,520
  • instantpage/instant.pageAvatar instantpage

    instantpage/instant.page

    6,225Vezi pe GitHub↗

    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.

    JavaScriptinstantperformance
    Vezi pe GitHub↗6,225
  • anmolsaini16/mapcnAvatar AnmolSaini16

    AnmolSaini16/mapcn

    5,965Vezi pe GitHub↗

    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.

    TypeScript
    Vezi pe GitHub↗5,965
  • evidence-dev/evidenceAvatar evidence-dev

    evidence-dev/evidence

    5,919Vezi pe GitHub↗

    Provides configurable tooltip fields, formatting, and styling for map markers.

    JavaScriptanalyticsbusiness-intelligencedashboard
    Vezi pe GitHub↗5,919
Înapoi123Înainte
  1. Home
  2. User Interface & Experience
  3. Hover Previews

Explorează sub-etichetele

  • Cluster Bound PreviewsUI elements that reveal the geographic extent of a marker group upon hover. **Distinct from Hover Previews:** Distinct from Hover Previews: specifically displays the geographic boundary box of a cluster, not just a tooltip or content window.
  • Commit Metadata OverlaysFloating overlays that display commit metadata such as author, date, and message when hovering over a graph node. **Distinct from Hover Previews:** Distinct from Hover Previews: focuses specifically on commit metadata display within a version control graph, not general content previews.
  • Content Reveal on Hover1 sub-tagExpands a card or container to show extra content when the user hovers over it. **Distinct from Hover Previews:** Distinct from Hover Previews: reveals content within the same container by expanding it, not as a floating popup.
  • Footnote TooltipsUI elements that display footnote content in a tooltip when hovering over the reference link. **Distinct from Hover Previews:** Specifically implements footnotes as hover-triggered tooltips rather than general content previews.
  • Hover Card DisplaysFloating cards that appear when hovering over a trigger element and hide when the cursor leaves. **Distinct from Hover Previews:** Distinct from Hover Previews: specifically uses a card container that stays visible near the trigger, not a generic popup preview.
  • Hover Detections Over Views1 sub-tagRecognizes when a mouse or stylus hovers above a view, enabling hover-based interactions. **Distinct from Hover Previews:** Distinct from Hover Previews: detects hover state over views rather than showing preview content on hover.
  • Hover-Activated Action ButtonsInteractive controls that appear in adornments upon hovering over a visual element. **Distinct from Hover Previews:** Focuses on actionable buttons appearing on hover, not just static information previews.
  • Hover-Triggered Page PrefetchesStart 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. **Distinct from Hover Previews:** Distinct from Hover Previews: focuses on prefetching pages on hover, not showing preview content.
  • Image Overlay on HoverShows a semi-transparent overlay with content over an image when the user hovers over it. **Distinct from Hover Previews:** Distinct from Hover Previews: applies an overlay directly on the image rather than showing a separate floating preview card.
  • Map Marker Tooltips1 sub-tagFloating content boxes that appear on marker hover and auto-dismiss on hover out for map interfaces. **Distinct from Hover Previews:** Distinct from Hover Previews: these are specifically for map markers, triggered by hover over geographic points, not general UI elements or document symbols.