Intro Js help tour

Question

Is there a way to customize the bullets in intro js, such that user can be sure of which step its going to jump on? I was asked if the bullets can have some kind of identification so that user can be sure when trying access help for the particular component.

http://jsfiddle.net/ee2s3p11/

The blue bullets are used for direct navigation to the steps, if some how those blue bullets can be customized, it would be easier for user to jump to the help component they are looking for.

Step 1 Step 2 Step 3 Step 4

Click Me!

.introjs-tooltip {
    min-width: 250px;
    max-width: 250px;
} 
.introjs-bullets ul li a {
    width: 15px;
    height: 15px;
    background-color: blue;
}

Answer 1

How about this:

.introjs-bullets ul li a:after {
  content: attr(data-stepnumber);
  color:#fff; position:relative; top:-2px;left:-2px;
}

See the fiddle

http://jsfiddle.net/ee2s3p11/1/