This is a simple script that adds simple bootstrap-popover interactive help to a webpage When prototyping or developing MVPs I often find myself wanting to priovide documentation that is as close to the user as possible, but would be cheap to include at the same time.
This script allows me to put documentation snippets together with the application code and easily and cheaply expose it to the users of my app.
When using vanilla bootstrap 3 the exaple looks something like this
In order to use the script, make sure that JQuery and Bootstrap are included in your page
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
afterward including the script interactiveHelp.js
should do the trick (for example by using e.g. https://rawgit.com)
All you need to do in you HTML do document elements is to provide at least those fields in the html tag
data-help="<order>" data-toggle="popover" data-placement="auto" data-content="<documentation>"
and add a class helpButton
to the control that should initiate the interactive help.
The example.html file is a simple usage example.