243 questions
1
vote
0
answers
26
views
create dynamic intro.js using php codeigniter
if (!sessionStorage.getItem('introSkipped')) {
introJs()
.setOptions({
steps: [
{
element: document.querySelector('#test'...
0
votes
0
answers
25
views
Intro.js Highlight an Element in an Iframe
I'm attempting to use the Intro.js library to create tooltips for a number of elements on a web page. The page includes an iframe, and I want to add a tooltip on a button that is rendered on the page ...
0
votes
0
answers
35
views
React: target dynamic HTML elements with Intro.js
I have been using Intro.js for React for a while now, and reallt like it.
However, I am not able to fix the one issue that is keeping me from continuing with the tours. That is the fact that I cannot ...
0
votes
0
answers
25
views
How do I wait for action complete on introjs onbeforechange
In my intro tour, I have a section where I need to expand a div with a slider before I can run intro on the internal elements. I use onbeforechange to expand the div, but it is a jquery animation. The ...
2
votes
1
answer
54
views
How to add a tooltip to an rintrojs button?
I would like to create an introtour in my shiny app using the rintrojs package with introjs function. In this introtour I would like to add a tooltip to the next button. In the documentation of intro....
0
votes
2
answers
74
views
Button onclick shows hidden message javascript
The button needs to be edited in css to appear the way I have, that part worked. Then it needs to show a message that says "welcome to the world of coding!" upon clicking the button. I feel ...
2
votes
0
answers
50
views
How do I reference js and css files from local library for IntroJs
I have a python 2.7 project that uses IntroJs 7. IntroJs just upgraded to a version 8 and it broke, with no warning, the functionality. I need to access 2 files from version 7, Intro.js and Introjs....
0
votes
0
answers
43
views
example scenario onchange using Intro.js at Vue
any example scenario reference for using function onbeforechange and onafterchange? The scenario is to open the popup when it reached to Step 2. I referred to this How do I fire a modal for the next ...
1
vote
1
answer
78
views
rintrojs problem returning to element once choices are updated
I have a shiny app that generates choices for selectizeInput() based on the value of another selector. Specifically, it finds the unique values of the selected variable and then makes those choices. ...
0
votes
0
answers
60
views
IntroJs Before starting the introJs I can't to go specific step
introJs().goToStep(2).start(); //starts introduction from step 2
for some reason this one doesn't work from documentation
if (guideInProgress !== null) {
intro.goToStep(...
1
vote
0
answers
70
views
node module error while using intro.js-react
I was trying to use intro.js- react library for my project onboarding but as sson as i import soething from this package i am getting this bug. i have seen such issue with other packages too. so i ...
0
votes
0
answers
37
views
functonality of drop downs on leaflet map, when introjs added is missed
i have a complicated html code that if i describe it simplely it composed of following parts:
1- a leaflet map covering full page;
2- a button which when clicked some vertically oriented accordin type ...
0
votes
0
answers
68
views
Moving between tabs inside conditional panels with rintrojs
I am building an intro for a shiny app using {rintrojs}, but on the final step which involves moving from a tabPanel in one conditionalPanel into another tabPanel in a different conditionalPanel, the ...
2
votes
1
answer
113
views
Add a part of a UI element as a step for introjs() tutorial
Is it possible to add a part of a UI (e.g., the filter section of a renderDataTable) to intro steps when using introjs()?
Example:
I want the user to know that they can use the filter section of the ...
1
vote
1
answer
172
views
introJS(): dontShowAgain option is not showing in Javascript
These are included in my <head>:
<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/...
0
votes
1
answer
229
views
Start tutorial after clicked a button that changes view (intro.js)
I have a side bar that is displayed in all views. In that side bar I have a dropdown menu to select some tours that are made with intro.js. There is a quick start, that works perfect. I want to add ...
0
votes
2
answers
495
views
intro.js-react using onchange
I am new to intro.js-react and I am currently trying to execute a function at a specific step, however I am having trouble figuring out how to do so. I know there is an onChange prop that can be used ...
-1
votes
1
answer
950
views
Rollup failed to resolve import when deploy on vercel
screenshot of the error
Rollup failed to resolve import "intro.js/introjs.css" when deploying React TypeScript app with Vite and Intro.js
I am trying to integrate Intro.js into my React ...
1
vote
0
answers
200
views
How can I use Intro.js-react with MUI DataGrids?
I'm using React, Material-UI, MUI DataGrids, and intro.js-react.
I'm trying to give users a tour of a screen that contains a MUI DataGrid.
The steps in the tour involve highlighting specific elements ...
1
vote
1
answer
412
views
Custom HTML elements in intro.js
Can I add checkboxes or custom HTML elements directly within the intro messages?
There are no any features in the documentation about adding custom HTML elements in intro messages.
const ...
0
votes
1
answer
58
views
Toggling a conditionalPanel within rintrojs
I would like an introduction using rintrojs that highlights a button that toggles between showing and not showing a conditionalpanel. If the conditional panel is not showing, when the intro gets to ...
0
votes
1
answer
158
views
How i can translate data-intro from inro.js to other languages using i18n in angular
I am using intro.js for showing quick start tour in angular. I am using data-intro and data-step attributes to display order and information of component that is displaying next in quick start tour.
I ...
0
votes
1
answer
184
views
is there any way we can start the intro.js tour from the step we newly added
Is there any way we can start the intro.js for newly added features only. for new used it will be starting from first setup, but for the user who have already watched till step x for them we can start ...
1
vote
1
answer
319
views
Intro.js start counting steps from the first step, skipping the first (introcution) one
In my Intro.js user adoption tutorial I need to show steps number starting only from the second step (the first one is only an introduction step without an element reference). So in that case the ...
0
votes
1
answer
352
views
Intro.js Issue where intro.js is not firing
I've added the intro.js and introjs.css file and followed the instructions for installation. When I click the Start link at the top of my site, nothing happens.
I've added an alert popup so I know the ...
0
votes
1
answer
493
views
Change dialog button color (Next/Back) : Intro JS React
I am using a React wrapper for intro js,
and I am trying to change the default background color for dialog buttons.
Here's a codesandbox given in the documentation
I want to change the background ...
0
votes
1
answer
140
views
introJs() API is not working when attached to an element inside a jquery modal dialog box
I am trying to show an Intro.js tour on an element which is inside a <table>. The <table> is inside a jquery UI dialog box
I am populating the table rows in my JavaScript:
while (i != 10) {...
-1
votes
1
answer
90
views
Hide Cross icon (Skip) on last step in Angular13 + IntroJs
I am getting problem on last step, close(skip) icon should be hide on last step.
#Angular13 @introJs
enter image description here
There is not option in introJS to hide Cross icon
0
votes
2
answers
3k
views
Intro.js: Failed to find a valid digest in the 'integrity' attribute for resource with computed SHA-512 integrity
I am trying to implement a simple intro animation to my html page using Intro.js library.
I have included this library in my html page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/...
1
vote
1
answer
71
views
How do we assign the data of the html input written in the ts file to the property of the class? (Angular+IntroJs)
I'm making an onboarding screen using Intro.js. In this screen, I want to receive an input from the user. However, to do this, when I add an input to the screen of intro.js, I cannot assign the data ...
1
vote
2
answers
953
views
In "Intro.js" and "Intro.js-react", the first step appears twice
The issue is like this.
When reloaded, a pop-up starts as this screenshot below.
The progress bar displays 0. And for some reason, the position is in the upper left corner.
And here, if you press &...
1
vote
1
answer
1k
views
In Intro.js and Intro.js-react, the first and second steps are positioned not properly
The issue is like this.
When reloaded, the first step and pop-up show in the upper left corner instead of the center, this is the first problem for me. I expected it to position center as the Intro.js ...
2
votes
1
answer
2k
views
ReferenceError: Element is not defined (Object.<anonymous>) in Intro.js-react, React, Next.js and Tailwind CSS
Code is like here.
import { useState } from 'react';
import { Steps } from 'intro.js-react';
export default function Dashboard() {
const [stepEnabled, setStepEnabled] = useState(true);
const ...
0
votes
1
answer
894
views
intro.js dontShowAgain
How do I use dontShowAgain in combination with setting steps as a JSON configuration? They are both invoked using .setOptions(), but have different syntax?
I tried to call both, but naturally the last ...
1
vote
0
answers
141
views
Intro.JS possible to check user input before proceed
So, i want to come out with the Javascript which forced user to input / select anything before going to next step, (like forced user to press button, input their name, etc). I am working on Django ...
3
votes
1
answer
658
views
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 ./...
4
votes
1
answer
1k
views
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;
...
3
votes
1
answer
2k
views
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__ is not a function
I'm trying to install intro.js in Angular and work on it but encountered an issue showing
TypeError: intro_js__WEBPACK_IMPORTED_MODULE_0__ is not a function
at new AppComponent (app.component.ts:...
1
vote
0
answers
583
views
I'm using CDN links of intro.js, I want to implement "don't show again checkbox on Intro.js pop-up", how can we do that?
We have a requirement where I have to add a checkbox on the intro.js pop-up,
so I have used intro.js min and CSS files CDN links to use the Intro.js,
currently, I'm getting intro.js pop-up with the ...
1
vote
0
answers
259
views
Problem with intro.js when navigating in single page app
I'm setting up a number of hints for a page in my single page app with React.
It's a data driven page which renders an image, which depends on what has been clicked on the previous page.
All works ...
1
vote
1
answer
698
views
Can you go to specific step within Angular IntroJS event?
It seems if I try to go to a particular step from within the IntroJS onexit event, it gets very confused and doesn't show the correct step and highlighted element.
I have my steps setup via json, i ...
3
votes
0
answers
409
views
Why does intro.js give me a "document is not defined" error?
I am trying to get the intro.js (https://introjs.com) javascript code to work on my Wix.com website, but I cannot get it to work.
I have the css file written into the header as described.
I have ...
3
votes
0
answers
344
views
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((...
1
vote
2
answers
577
views
How to allow users to replay an intro.js tour upon clicking a button?
I created a tour using intro.js and I'd like that after the tour is completed, the user can still restart it by clicking on a button.
This was already asked previously but not answer yet Similar ...
1
vote
1
answer
386
views
How to stop introJS scrolling content when tour includes footer elements
I'm implementing introJS on my website for a simple product tour (http://the.computing.cafe/). The behaviour of the tour is fine for elements fixed in the header but causes the main content to scroll ...
0
votes
1
answer
117
views
IntroJs Hints if parent not Visible
IntroJs hints
How can I skip or hide when a parent element is not visible? For some reason only inline seems to be working for my hints.I have the data-hints in spans on the HTML and I need to check ...
1
vote
4
answers
2k
views
Move to top on click of button
I am using intro.js in my code to implement the walkthrough. I want to implement a sceanrio where on clicking the done button(.introjs-donebutton) the page should scroll to the top but with this code ...
0
votes
1
answer
510
views
Importing angular-intro.js gives error angular-intro.js is not a module
I have tried:
import ngIntroJS from 'angular-intro.js/build/angular-intro';
import ngIntroJS from 'angular-intro.js/src/ng-intro.component';
But I get errors with both.
What is the correct way to ...
1
vote
1
answer
1k
views
Why does Intro js element selection not work in mat card
I have created a tour, added step and ids to elements. But a element that is nested in, is an angular component or is from a library that is for angular will not be highlighted.
This is my tour:
this....
1
vote
0
answers
277
views
Why Intro js disableInteraction doesn't work
I have created a tour and I want the items highlighted to be clickable so I added attribute disable interaction to the tour but the items are still not clickable.
this.introJS.setOptions({
...