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:
- Mediante click en el elemento
- 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 pseudoselectoresbefore
yafter
.
$('[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>