
Show HN: Intro.js Hints - afshinmeh
http://introjs.com/example/hint/index.html
======
sourcd
Good similar libs on github :

[https://github.com/zurb/joyride](https://github.com/zurb/joyride)

[https://github.com/heelhook/chardin.js](https://github.com/heelhook/chardin.js)

[https://github.com/linkedin/hopscotch](https://github.com/linkedin/hopscotch)

[https://github.com/sorich87/bootstrap-
tour](https://github.com/sorich87/bootstrap-tour)

[https://github.com/HubSpot/shepherd](https://github.com/HubSpot/shepherd)

[https://github.com/usablica/intro.js](https://github.com/usablica/intro.js)

Once I had a requirement and ended up trying nearly all of them and
unfortunately, had to write my own (took about a day and a half) that
accomplished the tour exactly the way I wanted. Off the top of my head, I
can't recall what each of them missed but primary reason was that often they
take off with a great experience and then the lead developer can't devote
enough time to meet the diverse requirements of a huge community. The library
ends up with a huge user base with lots of open issues, some critical to the
user experience on the myriad of mobile devices.

------
foxylion
Also a great library for onboarding purposes is Hopscotch [1]. It is allows
you to create a interactive tour through the UI.

We are using it to introduce new users when launching the webapp the first
time (Because having a 100% intuitive UI is a hard thing). We also made a
study which showed us that using a onboarding mechansim really helps the user
to get started and does not scare them away (which was a concern of some
people).

[1]
[https://github.com/linkedin/hopscotch](https://github.com/linkedin/hopscotch)

~~~
vangale
Hopscotch is one of the few tour libraries that can jump to steps on a
different page and (mostly) perform actions on behalf of the user.

~~~
foxylion
It's also great that they have a simple, but extensible API to use custom
actions to trigger the next step by e.g. a drag of a specific element.

------
nathancahill
Cool to see a project using Skeleton. Was disappointed when that project
fizzled out once the creator left. It hit the sweet spot in CSS frameworks for
me: small, un-opinionated and hard for people to tell you're using a framework
(unlike Bootstrap which you can spot a mile away). Haven't found anything to
replace it yet.

~~~
dimgl
I've used Skeleton in some projects while I was contracting. I've moved on to
Milligram.

~~~
degenerate
I like how Milligram operates... very 'clean'. Link for everyone else:
[https://milligram.github.io/](https://milligram.github.io/)

------
dkopi
This is an awesome library, and seems to be very vibrant on Github.

If you're looking for something commercial (and paying for something
commercial) however, I'd probably recommend one of the step by step tutorial
tools that allow you to build the walk through using a visual editor, and
without having to add code for each individual walk through and tool tip.

This is one of those cases where I just want to add a short JS snippet to my
site, and allow product / marketing to customize and fine tune the tutorials
and on-boarding without developer involvement.

~~~
leesalminen
Can you recommend a commercial product that does this?

~~~
napoleond
I'm not the parent, but was curious and did some digging. So far I've found
this Quora post with a few options: [https://www.quora.com/What-tools-can-I-
use-to-create-a-guide...](https://www.quora.com/What-tools-can-I-use-to-
create-a-guided-tour-walkthrough-of-my-website)

------
pdxandi
I used Skeleton in the past and loved it for the same reasons. I'm trying out
Imperavi Kube for a new project and it's clean, minimalist, and easy to use.
I'm on mobile, otherwise I'd find you a link, but I'd recommend you check it
out.

------
markherhold
This is exactly what I need to quickly explain elements of my dashboards to
new users! Alternatively, this could let me explain new elements as they are
added over time. Perfect!

~~~
Rafert
Be aware of the licensing though. It was MIT but as of March 9 the license
file mentions having to purchase a license if used commercial. Seems
contradictory with "to deal in the Software without restriction" part of the
MIT license text.

~~~
rloc
Right, I didn't notice at first.
[http://introjs.com/#commercial](http://introjs.com/#commercial)

Looks like if you use it as part of a commercial product, you have to pay the
license.

~~~
nathancahill
Which is only fair IMO, open source developers have to eat too!

~~~
afshinmeh
ah thanks God! :-)

------
sdneirf
Neat! I was just looking for something like this. Good call out on the MIT
license.

------
greenimpala
Write an unintuitive UI and then plaster it with 'hints' \- great!

~~~
taf2
UI is hard... takes a lot of iteration to get right and even then... hints
help IMO

~~~
afshinmeh
indeed.

