{"id":17782221,"url":"https://github.com/rnowosielski/interactive-help","last_synced_at":"2025-04-01T20:35:11.019Z","repository":{"id":77251191,"uuid":"81657756","full_name":"rnowosielski/interactive-help","owner":"rnowosielski","description":"JavaScript providing interactive help behaviour on a webpage","archived":false,"fork":false,"pushed_at":"2017-02-15T18:12:42.000Z","size":109,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T13:23:32.816Z","etag":null,"topics":["help","interactive-help","tooltips","user-experience","walkthrough"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rnowosielski.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-11T14:22:31.000Z","updated_at":"2017-02-22T15:23:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"7597dafe-7f5b-4212-b790-062f18728031","html_url":"https://github.com/rnowosielski/interactive-help","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnowosielski%2Finteractive-help","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnowosielski%2Finteractive-help/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnowosielski%2Finteractive-help/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnowosielski%2Finteractive-help/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rnowosielski","download_url":"https://codeload.github.com/rnowosielski/interactive-help/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709933,"owners_count":20821297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["help","interactive-help","tooltips","user-experience","walkthrough"],"created_at":"2024-10-27T05:04:18.874Z","updated_at":"2025-04-01T20:35:11.011Z","avatar_url":"https://github.com/rnowosielski.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive help extension\n\nThis is a simple script that adds simple bootstrap-popover interactive help to a webpage\nWhen 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.\n\nThis script allows me to put documentation snippets together with the application code and easily and cheaply expose it to the users of my app.\n\n## How does it look like\n\nWhen using vanilla bootstrap 3 the exaple looks something like this\n\n![Animation of the example](example.gif)\n\n## How to use it in the code\n\nIn order to use the script, make sure that JQuery and Bootstrap are included in your page\n\n```html\n\u003cscript src=\"http://code.jquery.com/jquery-latest.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css\" integrity=\"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp\" crossorigin=\"anonymous\"\u003e\n\u003cscript src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nafterward including the script `interactiveHelp.js` should do the trick (for example by using e.g. https://rawgit.com)\n\nAll you need to do in you HTML do document elements is to provide at least those fields in the html tag\n```\ndata-help=\"\u003corder\u003e\" data-toggle=\"popover\" data-placement=\"auto\" data-content=\"\u003cdocumentation\u003e\"\n```\n\nand add a class `helpButton` to the control that should initiate the interactive help.\n\n## Example\n\nThe [example.html](./example.html) file is a simple usage example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnowosielski%2Finteractive-help","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frnowosielski%2Finteractive-help","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnowosielski%2Finteractive-help/lists"}