Pretty spotlighting for shepherd.js

application.js.coffee

Shepherd.on 'show', (o) ->                                                               
  el = $(o.step.options.attachTo.element).first()                                        
  width = el.outerWidth() + 10
  height = el.outerHeight() + 10                                                         
  offset = el.offset()

  $('.shep-overlay').show().css({
    position: 'absolute',                                                                
    width: width,                                                                        
    height: height,
    'box-shadow': '0px 0px 4px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 10000px rgba(0,0,0,0.5)',
    top: offset.top - 5,                                                                 
    left: offset.left - 5,                                                               
    'z-index': 1000000                                                                  
  })  

Shepherd.on 'inactive', ->
  $('.shep-overlay').hide()
  
$ ->
  if $('.shep-overlay').length == 0
    shep_el = $('<div class="shep-overlay"></div>')
    $('body').append(shep_el)

shep.css.scss

.shepherd-content {
  max-width: 350px;
  z-index: 1000000;
}

Requires jQuery & Shep to be required beforehand. Probably needs prefixed box-shadow rules for all the browsers....

Thanks, it's pretty useful, however, I need to modify small thing to make it work:
el = $(o.step.options.attachTo.split(" ")[0]).first()

I'm not too keen on js. Where do you put this code? Just tried pasting it into my initialization code but it's throwing all types of errors. Does it have to go inside the shepherd.js file?