I have a doubt. Well, I have a post in which users post comments and next to each post I have a button belonging to each of them. Well, how do I do it so that when I click on each one of them? those buttons I get a popup.
With what event? An event for several elements. But be the same for all those buttons.
ahhh.These buttons are generated or imputed with php, when the user posts something, that something has a button.Help !!!
Given your comments and your confirmation of it, what you want to do is the following:
Apply a tooltip to several elements when clicking
This can be done very easily through classes or attributes in the elements. Next, I show you two ways:
For this we are going to use attributes data- that I find more useful than the classes in cases like these. What we will do is the following:
data-tooltip attribute will display a tooltip when click is done on them. For this, it is necessary to use the pseudoswiters before and 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> For this version we eliminate the tooltip-visible and replace it with hover to obtain the same effect.
*,
*: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> I see that you have edited your question again. I hope that this time you have said extactly what you want to do. What you want is to show a floating dialogue, as a kind of modal. Since you have put the jQuery tag, I will give you an answer based on it.
What we will do is extend the jQuery prototype.
$.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>To use this mini-balance, just do:
$('[toggle="tooltip"]').tooltip({ extraMargin: 40 });
Where extraMargin is the extra vertical margin that is given to the tooltip, so that there may be the effect of moving vertically.
If the button is repeated "x" times but the functionality is the same you can use a class to identify them and with jquery in the click event show the Modal window.