Position targets arrow

[DanielApt]

I need to position the targets arrow to the side, instead of the top of the element. Something like the image below:

I'm looking through the source code on how to achieve this.

I was thinking of adding this as a property for the step, so a step could look like this.

{
    title: 'Title',
    text: 'Description goes here',
    subject: '.main-nav',
    targets: '.main-nav li',
    arrowPosition: 'right' // positions the arrow to the right of the targets
}

My initial approach would be to pass this arrowPosition (or should we call it targetsPosition?) to the property Arrow class, and adjust the Arrow.positionate() method accordingly.

By default arrowPosition would be top (similar behaviour as happens currently), but we could allow supplying other properties. For now I had top, right, bottom, and left in mind.

We'd also need to provide new icons to the font file (caret-left, caret-right, etc), or we could continue to simply use the same arrow icon, and use transform: rotate(90deg) to make the arrow fit the position.

I've already started on something locally, and once I have something stable I can submit a PR, but advice would always be welcome.

[DanielApt]

I noticed this is a duplicate of #4

[DanielApt]

I'll be continuing the conversation in this issue, as this one is more focused on the implementation. For the ones interested, work in progress can be followed on my fork.

[DanielApt]

You can now position the arrow by using the arrowPosition property in a step.

See release v0.4.3