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.