Question

Amigo,saludos.Te escribo para ver si me puedes ayudar en algo.He intentado en todas partes.y lo que me dicen o me dan esta a media.

Mi duda?
Bueno tengo un sistema para postear texto y quizás imágenes en un futuro por parte de los usuarios que se registren en mi pagina,así como twitter o facebook,etc.

Bueno eso esta hecho en php y mysql.

Y.....?

Aquí vamos.....

cuando un usuario postea algo,cada post lleva consigo sus botones tales como, comentar(en un futuro, lol ). A la derecha de cada post hay un botón con el cual quiero que al hacer clic me abra un popup y me gustaría que fuera con jquery obviamente.Te digo que hecho eso con muchos códigos, pero cuando hago clic me abre el popup en el mismo lado que los demás popups que yo abra con los demás botones de los demás post. osea la posición de los diferente popups no se ubica con sus botón correspondiente.

Un ejemplo claro seria este sitio web en el cual a la izquierda de cada post de cada usuario hay un up/down para votos,es algo similar,pero el mio es que me abra un pequeño popup para introducirlos de otra forma que tengo en mente.

He intentado con muchos scripts.Y nada.

espero me entiendan y me den una mano.

Comments

No se ve la imagen que pusiste. Mejor pon tu código.

---

Pero yo puedo verla

---

Poné tu código, así vemos cómo funciona y podemos serguir desde ahí. Lo ideal sería que pongas en algún sitio funcionando un ejemplo de HTML estático con el JS y el CSS en dónde se vea el problema, para que lo podamos ver ejecutándose.

PD: si vos ves la imagen, es porque la pusiste en algún sitio en el que tenés que estar logueado para verla. Vos estás logueado y la ves; nosotros como no tenemos tu usaurio y contraseña, no la vemos.

---

Ya me dieron un código para hacerlo solo hay que ajustarlo a preferencias.

---

No estaría de más que lo publiques en una respuesta y la selecciones como solución.

Answer 1

HTML

<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>

CSS

@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;
}

JAVASCRIPT

$.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 });