In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect.
The purpose of using images as masks is to allow the icons to be colored in different ways by changing the background color of the div. In the example below, the icons change color when hovered over and remain colored when clicked.
$('.qs').click(function() {
$(this).toggleClass('active');
});div.icons {
display: grid;
grid-template-columns: repeat(auto-fill, 48px);
grid-gap: 0rem;
justify-content: space-between;
background-color: #eee;
}
div.icons .qs {
height: 30px;
width: 30px;
cursor: help;
margin: 9px;
transition: all 250ms;
}
div.icons div.qs {
background-color: rgb(134,134,134);
}
div.icons div.qs.qs-ecod:hover,
div.icons div.qs.qs-ecod.active {
background-color: rgb(39, 128, 186);
}
div.icons div.qs.qs-sust:hover,
div.icons div.qs.qs-sust.active {
background-color: rgb(235, 98, 28);
}
div.icons div.qs.qs-cost:hover,
div.icons div.qs.qs-cost.active {
background-color: rgb(51, 172, 95);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
<div class="qs qs-ecod" style="-webkit-mask-image: url(https://png.icons8.com/material/30/key.png); mask-mode: alpha;" data-tid="1" title="Login"></div>
<div class="qs qs-sust" style="-webkit-mask-image: url(https://png.icons8.com/material/30/settings.png); mask-mode: alpha;" data-tid="2" title="Settings"></div>
<div class="qs qs-cost" style="-webkit-mask-image: url(https://png.icons8.com/material/30/home.png); mask-mode: alpha;" data-tid="3" title="Add something"></div>
</div>Each element now includes a title attribute containing the menu item name. When the user hovers over an element, a tooltip will be displayed showing the menu item name after a slight delay. However, the client now requires a styled tooltip, which poses a challenge due to the masked nature of the div element.
I have considered using a hidden span element inside the div or a pseudo-element to display the title attribute but faced limitations. Placing the span element outside the div did not work well within the defined CSS grid as I couldn't position it absolutely relative to the div.
Is there a method to make an element fully visible even when contained within a masked element without adding extra wrapper elements?
My attempted solutions:
(1) Span Inside Div
$('.qs').click(function() {
$(this).toggleClass('active');
});... (CSS code)
div.qs span {
...
}
div.qs:hover span {
...
}... (HTML code)(2) Pseudo Element
$('.qs').click(function() {
$(this).toggleClass('active');
});... (CSS code)
div.qs:hover:before {
...
}... (HTML code)(3) Span After Div
$('.qs').click(function() {
$(this).toggleClass('active');
});... (CSS code)
div.qs + span {
...
}
div.qs:hover + span {
...
}... (HTML code)