jQuery mini help system

A mini help system with jQuery, able to display help text or a guide to users of our web application and search the content.

Mini help system with jQuery

It’s a small widget, with content searchable in real time. All matching terms will be highlighted.


1. Include CSS:

<link rel="stylesheet" href="assets/css/styles.css" />

2. Include necessary JS libs:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="assets/js/highlight.jquery.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/script.js"></script>

3. Define the html content:

<div id="widget">
  <div id="header">
    <input type="text" id="search" placeholder="Search in the text">

  <div id="content">
    <!-- Your help text goes here -->

Sample view:

jQuery mini help system
jQuery mini help system



Full tutorial with download: