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