Skip to main content
se añadieron 6764 caracteres en el cuerpo
Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

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.

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.

Origen Enlace
gugadev
  • 19.1k
  • 1
  • 27
  • 49

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>