Changes to the tooltips

This commit is contained in:
Kode
2022-03-15 19:08:10 +00:00
parent 8499d100ff
commit 1e35f83fed
5 changed files with 34 additions and 13 deletions

View File

@@ -128,6 +128,12 @@ $.when( $.ready ).then(function() {
});
$('#sortable').sortable('disable');
$('#sortable').on('mouseenter', '.item', function () {
$(this).siblings('.tooltip').addClass('active')
}).on('mouseleave', '.item', function () {
$(this).siblings('.tooltip').removeClass('active')
})
$('#search-container').on('input', 'input[name=q]', function () {
const search = this.value
const items = $('#sortable').children('.item-container')

View File

@@ -200,11 +200,13 @@ body {
text-align: center;
line-height: 30px;
display: none;
z-index: 1;
}
.tooltip {
padding: 25px;
border-radius: 5px;
background: #00000038;
background: #000000c8;
color: white;
position: absolute;
bottom: 120px;
@@ -212,11 +214,14 @@ body {
right: 0;
font-size: 13px;
backdrop-filter: blur(8px);
display: none;
}
&:hover {
.tooltip {
display: block;
z-index: 0;
opacity: 0;
transform: translateY(-20px);
transition: all 0.3s;
&.active {
transform: translateY(0);
opacity: 1;
z-index: 2;
}
}
}