{"id":22092184,"url":"https://github.com/pirxpilot/guide-me","last_synced_at":"2026-03-19T21:42:40.826Z","repository":{"id":15559983,"uuid":"18295171","full_name":"pirxpilot/guide-me","owner":"pirxpilot","description":"Data driven feature tour.","archived":false,"fork":false,"pushed_at":"2025-05-13T15:39:33.000Z","size":91,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-13T04:16:03.716Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://pirxpilot.github.io/guide-me/","language":"HTML","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/pirxpilot.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","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":"2014-03-31T14:04:52.000Z","updated_at":"2025-05-12T22:26:22.000Z","dependencies_parsed_at":"2025-03-23T23:45:30.705Z","dependency_job_id":"4161e394-8447-4a1e-bf60-16c3bf7fb9d2","html_url":"https://github.com/pirxpilot/guide-me","commit_stats":null,"previous_names":["code42day/tour"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/pirxpilot/guide-me","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pirxpilot%2Fguide-me","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pirxpilot%2Fguide-me/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pirxpilot%2Fguide-me/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pirxpilot%2Fguide-me/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pirxpilot","download_url":"https://codeload.github.com/pirxpilot/guide-me/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pirxpilot%2Fguide-me/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262883613,"owners_count":23379224,"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":[],"created_at":"2024-12-01T03:08:36.766Z","updated_at":"2026-02-04T10:41:03.105Z","avatar_url":"https://github.com/pirxpilot.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version][npm-image]][npm-url]\n\n# tour\n\n  Data driven feature tour.\n\n## Installation\n\n  Install with [npm]:\n\n    $ npm install guide-me\n\n  Live demo is [here](http://pirxpilot.github.io/guide-me/)\n\n## API\n\n### `Tour.play(index)`\n\nCall `play to start the tour.\n\n```javascript\n    var tour = require('guide-me');\n    tour('#tour-id').play();\n```\n\nThe optional `index` parameter allows to specify the step from which tour should be started. If\n`play` is called multiple times without `index` parameter, it restarts itself from\nthe step following the one that has been closed.\n\nTour is driven by HTML content. Elements with `data-tour-content` attribute are considered tour\nsteps. Each step describes DOM element with `data-tour-id` attribute.\n\n```html\n\u003ctemplate id='tour-id'\u003e\n  \u003cspan data-tour-content=\"button\"\u003eThis is how we start the tour.\u003c/span\u003e\n  \u003cdiv data-tour-content=\"image\"\u003e\n    \u003cp\u003eWe have nice picture here.\u003c/p\u003e\n    \u003cp\u003e\u003cem\u003eSeen enough?\u003c/em\u003e\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv data-tour-content=\"text\"\u003e\n    And that is the last element...\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nThe above example assumes that somewhere else on the page we have the corresponsing elements. The\norder of those does not matter, and they can be in any part of DOM tree.\n\n```html\n\u003cimg data-tour-id=\"image\" src='cute-cats.png'\u003e\n\u003cp data-tour-id=\"text\"\u003e\n  Id eros vidit pri...\n\u003c/p\u003e\n\u003cinput data-tour-id=\"button\" type=\"submit\" value=\"Important button\"\u003e\u003c/input\u003e\n```\n\nPlease note that `data-tour-content` can also contain CSS query expression to locate the element\nassociated with the step.\n\n```html\n\u003cdiv id='first'\u003e\n  \u003cimg class=\"image\" src='cute-cats.png'\u003e\n\u003c/div\u003e\n\n\u003c!-- This step refers to its element by CSS query --\u003e\n\u003cspan data-tour-content=\"#first .image\"\u003eThis is how we start the tour.\u003c/span\u003e\n```\n\nDefault position of step popover is `bottom`. It can be changed by specifying `data-position` attribute.\n\n```html\n\u003cspan data-tour-content=\"#abc\" data-position='left'\u003e\n  This step is displayed to the left of item with abc id.\n\u003c/span\u003e\n```\n\nSteps can optionally specify 'data-delay' (in millis). The sequence of events is as follows:\n\n- previous step is hidden - `hide` event is dispatched\n- `next` event is dispatched\n- tour waits for `delay` milliseconds - by `default` delay is 0\n- next step is displayed\n- `show` event is dispatched\n\n```html\n\u003cspan data-tour-content=\"#abc\" data-delay=\"250\"\u003e\n  Tour will wait 250ms before displaying this step.\n\u003c/span\u003e\n```\n\n### Tour.react(delay)\n\nTemporarily hides and redisplays the active step after a delay. Can be used to adjust the tour\npopover whenever user action changes the screen layout. If `delay` parameter is not specified, the\nvalue of `data- delay` for the active step is used.\n\n### Tour.hideStep()\n\nHidess active tour step.\n\n\n### Tour.showStep()\n\nShows active tour step.\n\n## Events\n\n- `begin` - before the tour start\n- `end` - after the tour ends\n- `next(index)` - when next step is about to be displayed\n- `show(index)` - when step popup is displayed\n- `hide(index)` - when step popup is hidden\n\n## Styling\n\nTour specific CSS can be used to style tours popovers and to mark the active steps.\n\n- `tour-popover` is used for tour popovers\n- `tour-active-step` marks the element associated with current active step\n- `tour-overlay` allows changing the overlay defaults\n\n## Custom labels\n\nTo change 'Next' and 'Close' labels in the Tour windows pass `options.labels` parameter to `Tour` constructor\n\n```javascript\nvar customLabels = {\n  cancel: 'Got it!',\n  ok: 'Go on...'\n};\nvar tour = require('tour')(null, { labels: customLabels });\n\n```\n\n## License\n\n  The MIT License (MIT)\n\n  Copyright (c) 2014 [Damian Krzeminski](https://pirxpilot.me)\n\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files (the \"Software\"), to deal\n  in the Software without restriction, including without limitation the rights\n  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n  copies of the Software, and to permit persons to whom the Software is\n  furnished to do so, subject to the following conditions:\n\n  The above copyright notice and this permission notice shall be included in\n  all copies or substantial portions of the Software.\n\n  THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n  THE SOFTWARE.\n\n[npm]: https://www.npmjs.org/\n\n[npm-image]: https://img.shields.io/npm/v/guide-me\n[npm-url]: https://npmjs.org/package/guide-me\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpirxpilot%2Fguide-me","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpirxpilot%2Fguide-me","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpirxpilot%2Fguide-me/lists"}