Skip to main content
1 de 2
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>

gugadev
  • 19.1k
  • 1
  • 27
  • 49