HelpPopover

01 - help-popover.coffee

###
Permite mostrar globitos de ayuda asociados a un elemento
del DOM. Para ello hay que asignar data-behavior="helpPopover".
Las opciones se cargar sobre data-:
    title: Título de la cajita. Default: 'Ayuda'
    placement: Posición de la cajita. Default: 'right'
    content: Texto de la cajita. Default: ''
    forget: True si quiere mostrarse el botón de 'No mostrar más'. Default: true
    delay: Demora para mostrar la cajita. Default: 1000
###

jQuery.fn.helpPopover = ->

  defaults =
    title: 'Ayuda'
    placement: 'right'
    content: ''
    forget: true
    delay: 1000

  options =
    title: this.data('popover-title') || defaults['title']
    content: this.data('popover-content') || defaults['content']
    placement: this.data('popover-placement') || defaults['placement']
    forget: if this.data('popover-forget') then this.data('popover-forget') else defaults['forget']
    delay: this.data('popover-delay') || defaults['delay']
    id: this.data('popover-id')
    html: true

  if options['forget'] && options['id'] is undefined
    throw 'HelpPopover: You must set popover-id to enable forget option'

  return if localStorage.getItem("popover-#{options['id']}")

  options['title'] += '<button type="button" class="close" data-dismiss="popover">&times;</button>'

  if options['forget']
    options['content'] += '<button type="button" class="forget btn btn-xs btn-default" data-behavior="forget-popover">No mostrar más</button>'

  this.popover(options).on 'shown.bs.popover', =>
    this.data('bs.popover').tip().find('[data-dismiss="popover"]').on 'click', =>
      this.popover 'hide'
    if options['forget']
      this.data('bs.popover').tip().find('[data-behavior="forget-popover"]').on 'click', =>
        localStorage.setItem("popover-#{options['id']}", 1)
        this.popover 'hide'

  if options['delay']
    setTimeout(=>
      this.popover 'show'
    , options['delay']
    )
  else
    this.popover 'show'


# ------- PAGE CHANGE -------

$(document).on "page:change", ->
  if $('[data-behavior~=helpPopover]').length > 0
    $('[data-behavior~=helpPopover]').helpPopover()

02 - button.html

<button type="button" 
        data-behavior="helpPopover" 
        data-popover-title="Realizar un pago" 
        data-popover-content="Haga click aquí para acceder a la pantalla de pago" 
        data-popover-placement="left" 
        data-popover-id="payment-popover">
        Nuevo pago
</button>

03 - popover.scss

.popover-title {
  color: white;
  background: rgb(0, 192, 239);
}
.popover .close {
  opacity: 1;
  color: white;
  line-height: 15px;
  font-weight: normal;
}
.popover .forget {
  display: block;
  margin-top: 5px;
}