Stack Overflow
Stack Overflow

Questions tagged [intro.js]

A JavaScript/HTML5 library for step-by-step introduction

Intro.js

A JavaScript/HTML5 library for better new feature introduction and step-by-step users guide for websites and projects.

http://introjs.com/

Documentation: http://introjs.com/docs/

Github: https://github.com/usablica/intro.js

239 questions
2
votes
1 answer

Intro.js React wrapper not parsing source map

I am following the tutorial example from React.js Onboarding Using Intro.js however when I look at my page the tooltip is not popping up and my terminal is giving the following errors: WARNING in ./node_modules/intro.js/intro.module.js Module…
Nicholas Cruz
  • 21
  • 3
2
votes
1 answer

How to adjust introjs-tooltip width using css

How to make a specific introjs tooltip width longer? I'm able to change the text color using css but changing the width is not working. CSS: .customTooltip * { color: #4a4a4a; font-size: 18px; } .customTooltip .introjs-tooltip-title { …
unice
  • 2,655
  • 5
  • 43
  • 78
2
votes
0 answers

Is Angular Intro JS tour with route change possible

Is it possible to dynamically add steps so that IntroJS can find the element after a route change ? Basically when a certain step is loaded, I am routing to another page this.introJs.onbeforechange((obj) => { if (this.introJs._currentStep === 0)…
yoyoma
  • 3,336
  • 6
  • 27
  • 42
2
votes
1 answer

Restarting Intro.Js tour from button?

Is there a way to restart Intro.Js from a button? I currently have it set up to run on page load with steps defined in JSON, which it does just fine. However, I want to make the tour available for users to refer to if ever they need it, accessed…
user3771691
  • 21
  • 1
2
votes
1 answer

elements are not identified by React wrapper for intro.js

I am using react wrapper for intro.js. I am trying to integrate it in functional component. The steps are working fine, but the intro.js is not correctly identifying the elements provided in the steps. I have tried defining the elements with…
Keerthana Ramachandran
  • 31
  • 3
2
votes
1 answer

How can i use intro.js on mobile devices appropriately

Description When using introjs on mobile devices with screen width under 600px, the tooltip will cover the element. when i hold the device horizontally, the tooltip moves into position. i have tried to set a custom css for the tooltip but when the…
Jared Gibb
  • 47
  • 5
2
votes
1 answer

Can't bind to 'data-intro' since it isn't a known property of 'button'

I am using intro.js library in angular 8. Everything working fine, but on this step I am stuck. I am not able to bind value in data-intro in this button tag. Actually "introForShowHide" is basically a text which i send from my component.ts file. Can…
Archana
  • 21
  • 1
2
votes
1 answer

Intro.js Multi page navigation in Vue, not working

Im trying to use intro.js through the vue-intro.js binding, to created a on-boarding process for my users that is capable of browsing through different routes in the application. vue binding https://github.com/alex-oleshkevich/vue-introjs intro.js…
Suoakira
  • 101
  • 4
2
votes
2 answers

Integrate Intro.js with React Hooks

How can I integrate intro.js with react hooks? The only documented examples (even on stack overflow) are for the componentDidMount etc methods.
Davide Lorino
  • 875
  • 1
  • 9
  • 27
2
votes
0 answers

Flexdashboard introJS

I am trying to implement introjs in a flexdashboard (shiny runtime), but I am not sure what causes issues. My introjs implementation in flexdashboard below is based on a shiny implementation which works just fine, see the following for example:…
Michael Hogers
  • 21
  • 2
2
votes
1 answer

introjs onafterchange fires before tooltip is positioned

While using introjs.js, I am trying to set the position of a tooltip (.introjs-tooltip) but, if I use the onafterchange event, my code runs, and then the position of the tooltip is set by introjs, and my values for top and left are overwritten. How…
Roger Knowles
  • 29
  • 3
2
votes
2 answers

Tooltip appears over the element in intro.js mobile view

I am using intro.js for an initial tour of a page on my website. The tour looks good on Desktop but on mobile, the tool-tip appears right above the element it is describing. The user cannot see the element in mobile view as tool-tip appears right…
Yesha
  • 648
  • 1
  • 7
  • 29
2
votes
1 answer

Using a product tour library with VueJS

I'm trying to setup a feature intro tutorial for my web app (like intro.js). I'm having trouble with intro.js with nothing happening (no error message or tour messages). I tried setting up the data attributes that intro.js uses and calling the tour…
bschulte3
  • 172
  • 7
2
votes
0 answers

intro.js does not understand elements with the transform property

I'm trying to apply a step intro for the element in an upright position (turned over by the rotate property) and nothing happens. How to fix it? more than 10 steps .chat-reveal { text-transform: uppercase; color: #9D9E9F; …
Anton Miadzved
  • 21
  • 2
2
votes
0 answers

IntroJS: Changing button label text 'onChange' for each steps with 'setOptions'

I want to change button text for each steps.I did with below method but text is not changing .Should i call refresh() method after setOptions ? Or i am doing with wrong way ?. var intro = introJs(); intro.setOptions({ steps: [ …
Arif Hussain
  • 147
  • 1
  • 15
1 2 3
…
15 16