awesome-repositories.com
المدونة
MCP
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
linkedin avatar

linkedin/hopscotchArchived

0
View on GitHub↗
4,173 نجوم·643 تفرعات·JavaScript·Apache-2.0·7 مشاهدات

Hopscotch

Hopscotch هي مكتبة وإطار عمل JavaScript لإنشاء جولات منتجات تفاعلية وأدلة تأهيل المستخدم. تعمل كأداة لبناء جولات إرشادية خطوة بخطوة تسلط الضوء على عناصر صفحة معينة وتعرض تلميحات سياقية لمساعدة المستخدمين على التنقل في واجهات تطبيقات الويب.

تعمل المكتبة كمنسق تلميحات يثبت فقاعات تعليمية على عناصر HTML عن طريق حساب موقعها داخل إطار عرض المتصفح. تدعم إنشاء جولات ذات علامة تجارية من خلال استخدام ملفات أنماط مخصصة وقوالب ترميز للتخصيص المرئي.

يتضمن إطار العمل إمكانيات لإدارة التسلسل وتكامل الأحداث، مما يسمح للمطورين بتشغيل ردود اتصال JavaScript مخصصة أثناء انتقالات الجولة لمزامنة الدليل مع تغييرات حالة التطبيق.

Features

  • User Onboarding Tours - Displays a sequence of instructional tooltips and highlights to walk users through a web application.
  • Guided Tour Libraries - Provides a framework that manages the sequence, layout, and animation of instructional bubbles.
  • Tooltip Positioning Engines - Anchors instructional bubbles to specific HTML elements by calculating their position in the browser viewport.
  • Interactive UI Walkthroughs - Creates interactive UI overlays and markers that guide users through software interfaces with step-by-step instructions.
  • Onboarding Frameworks - Provides a lightweight framework for creating instructional sequences to guide new users through digital workflows.
  • Product Tour Libraries - Provides a comprehensive library for building interactive, multi-step product walkthroughs.
  • Sequence Management - Tracks the current step index and navigation progress to manage the linear sequence of instructional content.
  • Web Interface Orientations - Helps users navigate complex web interfaces via step-by-step visual instructions and contextual help bubbles.
  • Element Anchoring - Positions instructional bubbles by binding them to specific HTML elements based on their bounding boxes in the viewport.
  • Tour Element Customization - Allows external stylesheets to override the default appearance of instructional bubbles via specific class names.
  • Bubble Content Templates - Renders the internal HTML of bubbles using markup templates to separate instructional content from core logic.
  • Tour Event Hooks - Provides lifecycle callbacks that trigger custom JavaScript logic during tour transitions to synchronize with application state.
  • Tour Style Customizers - Provides tools for modifying the visual appearance and branding of tour bubbles and layouts.
  • Tour Event Callbacks - Executes custom JavaScript callbacks when users reach specific milestones in a guided tour.
  • Guided Tours - Framework for adding product tours.
  • User Tours and Guides - Framework for adding product tours.

سجل النجوم

مخطط تاريخ النجوم لـ linkedin/hopscotchمخطط تاريخ النجوم لـ linkedin/hopscotch

بحث بالذكاء الاصطناعي

استكشف المزيد من المستودعات الرائعة

صف ما تحتاجه بلغة بسيطة — وسيقوم الذكاء الاصطناعي بترتيب آلاف المشاريع مفتوحة المصدر المنسقة حسب الصلة.

Start searching with AI

بدائل مفتوحة المصدر لـ Hopscotch

مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع Hopscotch.
  • linkedinattic/hopscotchالصورة الرمزية لـ LinkedInAttic

    LinkedInAttic/hopscotch

    4,184عرض على GitHub↗

    Hopscotch is a guided onboarding framework and JavaScript tour engine designed to create step-by-step user orientations on web pages. It functions as a library for rendering interactive product walkthroughs and tours using configuration files and customizable bubbles and overlays. The system manages the progression of guided steps and supports the discovery of interactive features by highlighting specific elements of a web interface. It allows for the creation of tailored guided paths through a web application to assist with user onboarding. The library provides capabilities for modifying to

    JavaScript
    عرض على GitHub↗4,184
  • ephread/instructionsالصورة الرمزية لـ ephread

    ephread/Instructions

    5,195عرض على GitHub↗

    Instructions is a Swift framework designed for creating guided tours and user onboarding experiences. It manages the sequence, animations, and layouts of instructional bubbles and highlighting markers to lead users through application features. The library provides tools for interface highlighting, using dimmed background overlays and precise cutouts to draw attention to specific UI elements. It includes mechanisms for walkthrough flow control, allowing developers to manage linear progression, jump to specific steps, or implement tour skipping logic. Visual elements are customizable through

    Swift
    عرض على GitHub↗5,195
  • sorich87/bootstrap-tourالصورة الرمزية لـ sorich87

    sorich87/bootstrap-tour

    4,411عرض على GitHub↗

    bootstrap-tour is a product tour library designed to create guided walkthroughs for websites using the Bootstrap framework. It functions as an interactive UI tool that uses a sequence of popover hints to highlight specific page elements and lead users through a workflow. The system coordinates guided experiences across multiple pages by mapping tour steps to unique URLs. It maintains user progress through local storage persistence, ensuring tours resume at the correct step after a page refresh. The library includes programmatic controls to start, pause, resume, or skip steps, and supports au

    CoffeeScript
    عرض على GitHub↗4,411
  • gilbarbara/react-joyrideالصورة الرمزية لـ gilbarbara

    gilbarbara/react-joyride

    7,588عرض على GitHub↗

    react-joyride is a user onboarding library for React applications used to create interactive guided tours and walkthroughs. It provides a framework for defining sequences of tooltips and beacons that highlight specific user interface elements to introduce users to application features. The library distinguishes itself through a programmatic controller that allows developers to manage tour state, navigation, and lifecycle events via external application logic. It supports a high degree of visual extensibility, allowing the replacement of default tooltips and beacons with custom components to m

    TypeScriptjoyridereactreact-component
    عرض على GitHub↗7,588
عرض جميع البدائل الـ 30 لـ Hopscotch→

الأسئلة الشائعة

ما هي وظيفة linkedin/hopscotch؟

Hopscotch هي مكتبة وإطار عمل JavaScript لإنشاء جولات منتجات تفاعلية وأدلة تأهيل المستخدم. تعمل كأداة لبناء جولات إرشادية خطوة بخطوة تسلط الضوء على عناصر صفحة معينة وتعرض تلميحات سياقية لمساعدة المستخدمين على التنقل في واجهات تطبيقات الويب.

ما هي الميزات الرئيسية لـ linkedin/hopscotch؟

الميزات الرئيسية لـ linkedin/hopscotch هي: User Onboarding Tours, Guided Tour Libraries, Tooltip Positioning Engines, Interactive UI Walkthroughs, Onboarding Frameworks, Product Tour Libraries, Sequence Management, Web Interface Orientations.

ما هي البدائل مفتوحة المصدر لـ linkedin/hopscotch؟

تشمل البدائل مفتوحة المصدر لـ linkedin/hopscotch: linkedinattic/hopscotch — Hopscotch is a guided onboarding framework and JavaScript tour engine designed to create step-by-step user… ephread/instructions — Instructions is a Swift framework designed for creating guided tours and user onboarding experiences. It manages the… sorich87/bootstrap-tour — bootstrap-tour is a product tour library designed to create guided walkthroughs for websites using the Bootstrap… gilbarbara/react-joyride — react-joyride is a user onboarding library for React applications used to create interactive guided tours and… usablica/intro.js — Intro.js is a JavaScript onboarding tour library and web interface guide framework. It functions as an interactive… kamranahmedse/driver.js — Driver.js is a browser-based library designed for creating interactive product tours and guided walkthroughs. It…