cfuze

Yes it is completely possible as the script loads in the admin side as well now. All you need to do is specify the id of the element you want the tour to show on it will appear. In order to start the tour though, you will need to include in your custom plugin or in the plugin you want the tour for, functions.php and add a call to: wpIntroJs_StartTour() That will kick off the tour. Of course, you can add a button to make that call as well. Hope this helps!

If the menu is visible and has an ID, yes. If the menu is collapsed, you will need to use JS to expand it prior to engaging the tour. If the submenu item does not have an id, then you can do: document.querySelector()

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

If you need something beyond that, then I recommend looking at Intro.JS’s documentation because they do have additional events that you can hook into, but they all require custom development are do not fit into the scope of this plugin. Hope this helps!

I presume you are having an issue like: https://stackoverflow.com/questions/15967289/intro-js-highlighted-area-doesnt-work-as-expected

If so, this CSS has worked for me in the past:

.introjs-helperLayer {
    background: transparent !important;
    /*background-color: rgba(255,255,255,.2) !important; */
}

.introjs-overlay {
    opacity: 0 !important;
    z-index: 99999999!important;
    mix-blend-mode: overlay !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    border: .2em solid rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1000;
}

Dynamic content is problematic, but the easiest way is to include the tour in the ajax response, but I don’t think the short code works then. You would have to start getting into the JavaScript to pull it off. The issue is that the tour is loaded before the dynamic content arrives. As such, the elements were never found so the tour won’t work. I got dynamic content working on a different site, but it was one-off code that just wouldn’t work for everyone. I will put dynamic content on the road map, but its going to be a ways down the road.

Regarding the background color, there must be a CSS clash at some place. The plugin itself doesn’t have CSS so it must be from the actual Intro.JS library. I would recommend bringing up an issue on their support page: https://github.com/usablica/intro.js. Hope this helps!

Let me take a look into this. I will get back to you shortly.

I would think so. I would just need to register the hook for admin. Let me take a look at it this weekend and if so, I will update the plugin.

Edit: So I got looking into this and I found a hook where I can inject the tour code. The issue is admin pages are slightly convoluted with which name is being called. For instance, some plugins use admin.php to load, others edit.php all with a URL variable to differentiate the plugin being called. I will have to work on this a bit, so it will probably be several days before an update, but I think we can make this work.

Thank you for your patience!

• This reply was modified 5 years, 11 months ago by cfuze. Reason: Additional information discovered