Dynamic Help Overlay Plugin With jQuery - help-overlay

This is a jQuery help overlay plugin which adds a SVG based help arrow (with custom text and background overlay) to an element on the screen when triggered. Ideal for introducing the new features on your web app.

How to use it:

1. Include both jQuery JavaScript library (slim build) and the jQuery help-overlay plugin on the html page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="helpOverlay.js"></script>

2. Attach help overlays to elements within the document.

<h1 id="home">help-overlay Plugin</h1>
<h2 id="second">Second Help Overlay</h2>
<h3 id="third">Third Help Overlay</h3>

helpOverlay.addLabelTo($('#home'), "Home page");
helpOverlay.addLabelTo($('#second'), "Second Help Overlay");
helpOverlay.addLabelTo($('#third'), "Third Help Overlay")

3. Possible parameters to config the help overlays.

• dom: target element
• label: help text
• pos: where to position the help label, e.g. bottomright, topleft, etc
• length: length of SVG arrow
• xaway: x offset
• yaway: y offset

helpOverlay.addLabelTo(dom, label, pos, length, xaway, yaway);

---

This awesome jQuery plugin is developed by Alemkin. For more Advanced Usages, please check the demo page or visit the official website.