Hola amigos.Hace tiempo estuve buscando algo como esto.Bueno,me lo facilitaron,pero tengo un problema mas. Verán cuando pulso el botón me sale un tooltip o mejor dicho una ventana modal debajo del botón.
Cual es el problema?
El problema esta en que si tengo activado el modal y quiero re-dimensionar la ventana este(el modal) se queda en su mismo sitio y no se mueve.
HTML
<button class="btn pink rounded" toggle="tooltip" target="#hacer-algo">
★
</button>
<div tooltip status="hidden" id="hacer-algo">
<header>
<p>Favoritos</p>
</header>
<section class="body">
<h3>
¿Desea agregar a favoritos?
</h3>
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>
<section class="buttons">
<button class="btn outline green">
Confirmar
</button>
</section>
</section>
</div>CSS
@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;
}
JAVASCRIPT
$(document).ready(function(){
$.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.attr('status', 'hidden');
}
});
}
});
$('[toggle="tooltip"]').tooltip({ extraMargin: 50 });
});