{"action":"created","issue":{"url":"https://api.github.com/repos/usablica/intro.js/issues/598","repository_url":"https://api.github.com/repos/usablica/intro.js","labels_url":"https://api.github.com/repos/usablica/intro.js/issues/598/labels{/name}","comments_url":"https://api.github.com/repos/usablica/intro.js/issues/598/comments","events_url":"https://api.github.com/repos/usablica/intro.js/issues/598/events","html_url":"https://github.com/usablica/intro.js/issues/598","id":162654246,"number":598,"title":"Add steps in Javascript","user":{"login":"schuesslerf","id":10630224,"avatar_url":"https://avatars.githubusercontent.com/u/10630224?v=3","gravatar_id":"","url":"https://api.github.com/users/schuesslerf","html_url":"https://github.com/schuesslerf","followers_url":"https://api.github.com/users/schuesslerf/followers","following_url":"https://api.github.com/users/schuesslerf/following{/other_user}","gists_url":"https://api.github.com/users/schuesslerf/gists{/gist_id}","starred_url":"https://api.github.com/users/schuesslerf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/schuesslerf/subscriptions","organizations_url":"https://api.github.com/users/schuesslerf/orgs","repos_url":"https://api.github.com/users/schuesslerf/repos","events_url":"https://api.github.com/users/schuesslerf/events{/privacy}","received_events_url":"https://api.github.com/users/schuesslerf/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-06-28T10:34:32Z","updated_at":"2016-06-28T11:09:18Z","closed_at":"2016-06-28T10:56:26Z","body":"Hello,\r\n\r\nI wonder if in the \"pour\" version pure version of intro.js (without angular directive), there is a way to define the steps in Javascript, just like in angular directive, so something like:\r\n\r\n```\r\nthis.IntroOptions = {\r\n            steps: [\r\n                {\r\n                    element: document.querySelector('#step1'),\r\n                    intro: \"This is the first tooltip.\"\r\n                },\r\n                {\r\n                    element: document.querySelectorAll('#step2')[0],\r\n                    intro: \"<strong>You</strong> can also <em>include</em> HTML\",\r\n                    position: 'right'\r\n                },\r\n                {\r\n                    element: '.nicediv',\r\n                    intro: 'More features, more fun.'\r\n                },\r\n                {\r\n                    element: '#step4',\r\n                    intro: \"Another step.\",\r\n                    position: 'bottom'\r\n                },\r\n                {\r\n                    element: '#step5',\r\n                    intro: 'Get it, use it.'\r\n                }\r\n            ],\r\n            showStepNumbers: false,\r\n            showBullets: false,\r\n            exitOnOverlayClick: true,\r\n            exitOnEsc: true,\r\n            nextLabel: '<strong>NEXT!</strong>',\r\n            prevLabel: '<span style=\"color:green\">Previous</span>',\r\n            skipLabel: 'Exit',\r\n            doneLabel: 'Thanks',\r\n            showProgress: true,\r\n            showButtons: true\r\n        };\r\n```\r\n\r\nI only found the thing to work with changes in HTML, so adding  data-step and data-intro attributes to the HTML element. Is there a way to that programatically as well?"},"comment":{"url":"https://api.github.com/repos/usablica/intro.js/issues/comments/229019449","html_url":"https://github.com/usablica/intro.js/issues/598#issuecomment-229019449","issue_url":"https://api.github.com/repos/usablica/intro.js/issues/598","id":229019449,"user":{"login":"schuesslerf","id":10630224,"avatar_url":"https://avatars.githubusercontent.com/u/10630224?v=3","gravatar_id":"","url":"https://api.github.com/users/schuesslerf","html_url":"https://github.com/schuesslerf","followers_url":"https://api.github.com/users/schuesslerf/followers","following_url":"https://api.github.com/users/schuesslerf/following{/other_user}","gists_url":"https://api.github.com/users/schuesslerf/gists{/gist_id}","starred_url":"https://api.github.com/users/schuesslerf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/schuesslerf/subscriptions","organizations_url":"https://api.github.com/users/schuesslerf/orgs","repos_url":"https://api.github.com/users/schuesslerf/repos","events_url":"https://api.github.com/users/schuesslerf/events{/privacy}","received_events_url":"https://api.github.com/users/schuesslerf/received_events","type":"User","site_admin":false},"created_at":"2016-06-28T11:09:18Z","updated_at":"2016-06-28T11:09:18Z","body":"Hmm, it doesn't seem to work completely yet, the 'Hello World' works, but when defining a selector, it gets to the upper left corner and not to the element."}}
{"actor":{"display_login":"schuesslerf"}}