3

Tengo una duda.Bien.Tengo un un post en el que los usuarios publican comentarios y al lado de cada post tengo un boton perteneciente a cada uno de ellos.Bien,como hago para que cuando yo haga click en cada uno de esos botones me salga un popup.

Con que evento?.Un evento para varios elementos.Pero que sea el mismo para todos esos botones.

ahhh.Esos botones son generados o imrimido con php,cuando el usuario postea algo,ese algo tiene un boton.Ayuda!!!

introducir la descripción de la imagen aquí

8
  • ¿Estás usando algún framework CSS como Bootstrap?
    – gugadev
    Commented el 8 oct. 2016 a las 10:55
  • @MitsuG No,no uso ninguno
    – luis
    Commented el 8 oct. 2016 a las 13:07
  • El tooltip que comentas en la respuesta de abajo, ¿lo haces con alguna librería? Coloca un ejemplo en tu pregunta.
    – gugadev
    Commented el 8 oct. 2016 a las 13:37
  • @MitsuG No uso librerias,es todo hecho por mi.Me gustaria poner una foto de un ejemplo para que me puedan ayudar mejor.
    – luis
    Commented el 8 oct. 2016 a las 13:57
  • Para resumir. Lo que quieres es que cuando se haga click en un elemento se muestre un tooltip debajo de éste, ¿cierto?
    – gugadev
    Commented el 8 oct. 2016 a las 14:00

2 respuestas 2

3

Dado tus comentarios y tu comfirmación de ello, lo que quieres hacer es lo siguiente:

Aplicar a varios elementos un tooltip cuando se haga click

Esto se puede hacer muy fácilmente mediante clases o atributos en los elementos. A continuación, te muestro dos formas:

  1. Mediante click en el elemento
  2. Mediante hover en el elemento (no requiere JS)

Tooltip en click

Para esto vamos a utilizar atributos data- que me parecen más útiles que las clases en casos como éstos. Lo que haremos es lo siguiente:

  • Todos los elementos que tengan atributo data-tooltip desplegarán un tooltip cuando se haga click sobre ellos. Para esto, es necesario usar los pseudoselectores before y after.

$('[tooltip]').on('blur', function() {
  $(this).removeAttr('tooltip-visible');
});
$('[tooltip]').on('click', function() {
  $(this).attr('tooltip-visible', true);
});
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 62.5%;
  padding: 1.5rem;
  text-align: center;
}

.btn {
  background: -webkit-linear-gradient(top, #fbfbfb, #f5f5f5);
  background: linear-gradient(to bottom, #fbfbfb, #f5f5f5);
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
  color: #222;
  font-family: 'segoe ui';
  font-size: .9rem;
  margin: 10px;
  padding: .5rem 1rem;
  -webkit-transition: box-shadow .2s ease;
  transition: box-shadow .2s ease;
}
.btn:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn:focus {
  outline: none;
}
.btn.green {
  background: #16a085;
  border-color: #16a085;
  color: #fff;
}
.btn.blue {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}
.btn.gold {
  background: #f39c12;
  border-color: #f39c12;
  color: #fff;
}
.btn.red {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.btn.blue {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}

[tooltip] {
  position: relative;
}
[tooltip]:before, [tooltip]:after {
  -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, transform .2s ease;
  transition: opacity .2s ease, transform .2s ease, -webkit-transform .2s ease;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  pointer-events: none;
  z-index: 5;
}
[tooltip]:before {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid rgba(0, 0, 0, 0.9);
  left: 6px;
  opacity: 0;
  position: absolute;
  top: 110%;
}
[tooltip]:after {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  color: #fff;
  content: attr(title);
  display: inline-block;
  left: 0px;
  padding: .3rem .4rem;
  opacity: 0;
  position: absolute;
  top: 130%;
  width: 125px;
}
[tooltip][tooltip-visible]:before, [tooltip][tooltip-visible]:after {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button 
  class="btn"
  tooltip
  title="Press me!"
>
  Normal
</button>
<button 
  class="btn green"
  tooltip
  title="Confirm changes"
>
  Success
</button>
<button 
  class="btn gold"
  tooltip
  title="Be careful!"
>
  Warning
</button>
<button 
  class="btn red"
  tooltip
  title="Are you sure?"
>
  Danger
</button>
<button 
  class="btn blue"
  tooltip
  title="Press me too!"
>
  Primary
</button>

Tooltip en hover (no requiere JS)

Para esta versión eliminamos el tooltip-visible y lo reemplazamos por hover para obtener el mismo efecto.

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 62.5%;
  padding: 1.5rem;
  text-align: center;
}

.btn {
  background: -webkit-linear-gradient(top, #fbfbfb, #f5f5f5);
  background: linear-gradient(to bottom, #fbfbfb, #f5f5f5);
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
  color: #222;
  font-family: 'segoe ui';
  font-size: .9rem;
  margin: 10px;
  padding: .5rem 1rem;
  -webkit-transition: box-shadow .2s ease;
  transition: box-shadow .2s ease;
}
.btn:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn:focus {
  outline: none;
}
.btn.green {
  background: #16a085;
  border-color: #16a085;
  color: #fff;
}
.btn.blue {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}
.btn.gold {
  background: #f39c12;
  border-color: #f39c12;
  color: #fff;
}
.btn.red {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.btn.blue {
  background: #2980b9;
  border-color: #2980b9;
  color: #fff;
}

[tooltip] {
  position: relative;
}
[tooltip]:before, [tooltip]:after {
  -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, transform .2s ease;
  transition: opacity .2s ease, transform .2s ease, -webkit-transform .2s ease;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  pointer-events: none;
  z-index: 5;
}
[tooltip]:before {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid rgba(0, 0, 0, 0.9);
  left: 6px;
  opacity: 0;
  position: absolute;
  top: 110%;
}
[tooltip]:after {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  color: #fff;
  content: attr(title);
  display: inline-block;
  left: 0px;
  padding: .3rem .4rem;
  opacity: 0;
  position: absolute;
  top: 130%;
  width: 125px;
}
[tooltip]:hover:before, [tooltip]:hover:after {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
<button 
  class="btn"
  tooltip
  title="Press me!"
>
  Normal
</button>
<button 
  class="btn green"
  tooltip
  title="Confirm changes"
>
  Success
</button>
<button 
  class="btn gold"
  tooltip
  title="Be careful!"
>
  Warning
</button>
<button 
  class="btn red"
  tooltip
  title="Are you sure?"
>
  Danger
</button>
<button 
  class="btn blue"
  tooltip
  title="Press me too!"
>
  Primary
</button>

Actualización

Veo que has editado otra vez tu pregunta. Espero que esta vez hayas dicho extactamente qué quieres hacer. Lo que deseas es mostrar un diálogo flotante, como una especie de modal. Ya que has puesto la etiqueta jQuery, te daré una respuesta en base a ella.

Lo que haremos será extender el prototipo de jQuery.

$.fn.extend({
  tooltip: function(settings) {
    return this.each(function() {
      // 40 -> para que no esté muy pegado
      var top = $(this).offset().top + 40;
      var left = $(this).offset().left;
      // diálogo objetivo
      var dialog = $($(this).attr('target'));
      // centrado horizontal:
      // originW -> ancho del disparador (botónn, link, etc)
      // dialogW -> ancho del dialogo objetivo
      originW = $(this).width();
      dialogW = dialog.width();

      // posiciona los dialogos. El centrado lo hace en base a:
      // [ancho_dialogo / 2] - (ancho_disparador / 2)
      var centerMargin = (dialogW / 2) - (originW / 2);
      top += $(this).height();
      var cssTop = (top + settings.extraMargin) + 'px';
      var cssLeft = (left - centerMargin) + 'px';
      dialog.css('transform', 'translate(' + cssLeft + ', ' + cssTop + ')');
      
      $(this).on('click', function() {
        var status = dialog.attr('status');
        // está oculto, se debe mostrar
        if(status === 'hidden') {
          showTooltip();
        } else {
          hideTooltip();
        }
      });
      
      var showTooltip = function() {
        var _cssTop = top + 'px';
        dialog.css('opacity', '1');
        dialog.css('visibility', 'visible');
        dialog.css('transform', 'translate(' + cssLeft + ', ' + _cssTop + ')');
        dialog.attr('status', 'visible');
      }
      
      var hideTooltip = function() {
        dialog.css('opacity', '0');
        dialog.css('visibility', 'hidden');
        dialog.css('transform', 'translate(' + cssLeft + ', ' + cssTop + ')');
        dialog.attr('status', 'hidden');
      }
    });
  }
});

$('[toggle="tooltip"]').tooltip({ extraMargin: 40 });
@import "https://fonts.googleapis.com/css?family=Lato:400,700";
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem;
}

.btn {
  background: -webkit-linear-gradient(top, #fbfbfb, #f5f5f5);
  background: linear-gradient(to bottom, #fbfbfb, #f5f5f5);
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
  color: #222;
  cursor: pointer;
  font-family: 'lato';
  font-size: .9rem;
  padding: .5rem 1rem;
  -webkit-transition: box-shadow .2s ease;
  transition: box-shadow .2s ease;
}
.btn:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn:focus {
  outline: none;
}
.btn.rounded {
  border-radius: 100%;
  height: 40px;
  padding: .4rem 0;
  text-align: center;
  width: 40px;
}
.btn.green {
  background: #16a085;
  border-color: #16a085;
  color: #fff;
}
.btn.green.outline {
  background-color: #fff;
  border: none;
  color: #16a085;
  box-shadow: none;
  font-weight: 600;
  text-transform: uppercase;
}
.btn.green.outline:hover {
  box-shadow: none;
}
.btn.pink {
  background: #F62459;
  border-color: #F62459;
  color: #fff;
}

[tooltip] {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.1);
  display: inline-block;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  -webkit-transition: opacity .2s ease, visibility .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, visibility .2s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease, -webkit-transform .2s ease;
  visibility: hidden;
}
[tooltip] header {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e8e8e8;
  padding: .25rem .8rem;
}
[tooltip] header p {
  color: #222;
  font-family: 'lato';
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
[tooltip] .body {
  padding: .7rem 1rem;
}
[tooltip] .body h3 {
  font-family: 'lato';
  font-size: 17px;
  font-weight: 400;
  text-align: center;
}
[tooltip] .body .buttons {
  margin-top: 30px;
  text-align: center;
}
[tooltip] .body .buttons * {
  margin: 0 10px;
}
[tooltip]:before {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid #f2f2f2;
  left: 47%;
  opacity: 1;
  position: absolute;
  top: -9px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button
  class="btn pink rounded"
  toggle="tooltip"
  target="#hacer-algo">
  ★
</button>

<!-- tooltip dialogs -->
<div 
     tooltip
     status="hidden"
     id="hacer-algo">
  <header>
    <p>Favoritos</p>
  </header>
  <section class="body">
    <h3>
      ¿Desea agregar a favoritos?
    </h3>
    <section class="buttons">
      <button class="btn outline green">
        Confirmar
      </button>
    </section>
  </section>
</div>

Para usar esta minilibrería, solo basta hacer:

$('[toggle="tooltip"]').tooltip({ extraMargin: 40 });

Donde extraMargin es el margin vertical extra que se le da al tooltip, para que pueda haber el efecto de trasladar verticalmente.

7
  • Antes de aplicar tu codigo,me gustaria si puedo agregar elementos tales como textbox o botones dentro de ese tooltip
    – luis
    Commented el 8 oct. 2016 a las 15:59
  • 1
    Nop. Es un tooltip no es un diálogo flotante. Sin embargo, modificando un poco el código puedes obtener el mismo efecto. Los diálogos flotantes deben de referenciarse mediante su id, al estilo de bootstrap (data-toggle-modal="iddelmodal". Puedes aplicar los mismos efectos que el demo que te he hecho.
    – gugadev
    Commented el 8 oct. 2016 a las 16:52
  • Muchas gracias amigo.La verdad es que me has ayudado bastante.Lo único que hice para poder aplicar tu código fue borrar el código css que hacia referencia al body y todo bien.Vuelvo y te digo muchísimas gracias por tu tiempo.Para terminar una preguntita mas...Ese código lo armaste tu?Acaso ese era el único camino para hacer algo asi?Gracias de todo corazón.
    – luis
    Commented el 9 oct. 2016 a las 15:30
  • 1
    El código es mío. No es el único camino, siempre hay más. Sin embargo, me basé en esto ya que usas jQuery.
    – gugadev
    Commented el 9 oct. 2016 a las 15:31
  • 1
    Solo practicando y practicando. No necesitas algún don, solo leer y practicar.
    – gugadev
    Commented el 9 oct. 2016 a las 15:35
0

Si el botón se repite "x" veces pero la funcionalidad es la misma puedes usar una clase para identificarlos y con jquery en el evento click mostrar la ventana Modal.

2
  • bien eso ya lo puse con una clase,pero ahora el problema esta en que cuando hago click en cualquier boton la ventana me sale en mismo lado.
    – luis
    Commented el 8 oct. 2016 a las 6:00
  • Me gustaria que me saliera debajo del boton que hago click
    – luis
    Commented el 8 oct. 2016 a las 6:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.