Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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:'popover-title') || defaults['title']
content:'popover-content') || defaults['content']
placement:'popover-placement') || defaults['placement']
forget: if'popover-forget') then'popover-forget') else defaults['forget']
delay:'popover-delay') || defaults['delay']
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 '', =>'bs.popover').tip().find('[data-dismiss="popover"]').on 'click', =>
this.popover 'hide'
if options['forget']'bs.popover').tip().find('[data-behavior="forget-popover"]').on 'click', =>
localStorage.setItem("popover-#{options['id']}", 1)
this.popover 'hide'
if options['delay']
this.popover 'show'
, options['delay']
this.popover 'show'
# ------- PAGE CHANGE -------
$(document).on "page:change", ->
if $('[data-behavior~=helpPopover]').length > 0
<button type="button"
data-popover-title="Realizar un pago"
data-popover-content="Haga click aquí para acceder a la pantalla de pago"
Nuevo pago
.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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.