One of the things I’m known for is super complicated JavaScript solutions for the most mundane tasks. But I have heard some complaints by people who want to keep things a little simpler and easier to maintain. So while I have written about custom tooltips before, let’s focus on one that requires no JavaScript at all. This is a pure CSS solution that I shamelessly stole from here: https://codepen.io/chocochip/pen/zYxMgRG
The trick here is it’s all CSS, so in order for it to work we do need to add an HTML item to hold the STYLE node.
<style>
div[lid*=wrapper] {
position: relative;
display: inline-block;
}
div[lid*=content]{
opacity: 0;
visibility: hidden;
position: absolute;
left: -10px;
transform: translate(0, 10px);
background-color: #bfbfbf;
padding: 1.5rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
width: auto;
}
div[lid*=wrapper]:hover div[lid*=content] {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, -20px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
div[lid*=wrapper]:hover div[lid*=content] * {
user-select: text !important;
-moz-user-select: text !important;
-webkit-user-select: text !important;
-ms-user-select: text !important;
}
</style>
There are a few interesting things to note here. I’m using the css selector lid*=wrapper, this will match any blocks with the name starting with “wrapper”, so multiple blocks named wrapper, wrapper1, wrapperbig, will all be affected by the style. The last bit is to allow the contents of the popover to be highlighted and copied.
“But how can you use this”, I hear you ask. It’s actually quite easy. First a caveat, this doesn’t work with points on a graph. I’m looking for a solution for graphs, but we might have to rely on JS instead of CSS only solution. The way this specific solution works is to have the structure look like this:
wrapperBlock (in yellow)
Item (this is what the user sees and hovers over. In this case I’m using a text item)
contentBlock (in teal)
This is what appears in the popup tooltip. (I’m pretty sure this can be almost anything except a c11 graph)
Let’s take a look at it in action:
A couple things to note, the tooltip doesn’t instantly appear when you move your cursor over the items, only when you pause on one. We can also see that the user-select does work, and we can now select the text in the popover.
Take a look at the attached report below:
csstooltipreport.txt (852 downloads)
