Customizing Chardin.js lines

I had a problem this week where I had to show instructions for a section of one site. Looking through google, I found this awesome plugin called chardin.js. We didn’t like the appearence of the lines, so I went to customize a little. I’m gonna use this arrow in that example:

Chardin.js uses pseudo-elements to create these lines that are used in their instructions. So what we have to do is change them in chardinjs.css file. In content a dot is used to turn into a line, so we have to remove along background-color and instead we will add background-image.

# Change this

  .chardinjs-tooltip.chardinjs-right:before, [...] {
    content: ".";
    display: inline-block;
    background-color: white;
    height: 1px;
    overflow: hidden;
    position: absolute; }

# to

.chardinjs-tooltip.chardinjs-right:before, [...] {
    content: "";
    display: inline-block;
    height: 1px;
    overflow: hidden;
    position: absolute;
    background-image:url(../images/instruction-arrow.png);}

Next we gonna add width and height to show the arrow, and then move its position a little higher to the top.

  .chardinjs-tooltip.chardinjs-top:after {
    width: 11px;
    height: 30px;
  }

  .chardinjs-tooltip.chardinjs-top:after {
    bottom: -50px;
  }

Now it’s finished, you can improve to show for every angle (left, right, bottom), in that case only top position is modified. Click the button below if you want to see the result. :)

See in action