Notes on CSS Popup Tooltips

Ivar Thorson bio photo By Ivar Thorson

Front-end website development is not my strongest area, so I’m just going to share some notes I took on how to make a hover “tooltip” on some text using CSS. I have a feeling this will come up again as handy sometime.

The HTML can be very simple, as the next snippet shows. (I’m including a few extra paragraphs above the tooltip, because the tooltip pops above the text, and I want to make sure it is visible when it pops up.)

<html>
<head>
  <link rel="stylesheet" href="site.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor dolor lorem, at tempus lacus maximus aliquet. </p>
<p>Sed sed elit hendrerit lacus tincidunt venenatis. Proin non odio eget massa commodo mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Ut tempor, nisi quis varius interdum, turpis tellus dictum nulla, nec cursus ipsum sem iaculis odio. Ut ullamcorper aliquet libero, id molestie lorem mollis a. Curabitur fermentum tellus vitae semper venenatis. Duis pellentesque eros volutpat ligula hendrerit, quis ornare nunc iaculis. Nunc nec pellentesque augue, ac finibus risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="hovertooltip" data-hovertext="This is the hovertext">This is the paragraph with a hover popup.</div>
</body>
</html>

The CSS in site.css is a little more complicated:

.hovertooltip {
    margin-right: 10px;    
    position: relative;
    margin-top: 5px;    
    margin-bottom: 5px;
}

.hovertooltip::before {
    content: attr(data-hovertext);
    position: absolute;
    width: 200px;         
    opacity: 0;          
    bottom: calc( 100% + 10px );
    padding: 10px;       
    border-radius: 5px; 
    transition: 0.1s;
    background: white;
    border: 1px solid;
    visibility: hidden;
    line-height: 1.2;
}

.hovertooltip:hover::before {
    opacity: 1;            
    visibility: visible;  
}

Play with transition = 0.1s which makes it fade in more or less gently, play with margin affects the spacing outside of the element, and play with padding affects the spacing inside. The bottom parameter controls the height of the popup.

I also scribbled down these notes about CSS Selectors:

Note Example Meaning
Adding a space between selectors indicates nesting a b means any b inside a
Adding a gt between selectors indicates nesting a > b means b immediately inside a
Adding a tilde looks for ANY following siblings a ~ b means any b after a
Adding a plus between looks for following siblings a + b means b immediately after a
No spaces makes it look for a match of both clases a.b means something that is a and b
Commas separate multiple selectors a, b means a or b
Colons like :hover indicate “pseudo-selectors” a:hover ???

And I received the following words of wisdom from an experienced front-end dev:

  1. All presentation formatting should be done with CSS, never with HTML tags.
  2. Prefer .classes to #identifiers unless something is guaranteed unique.
  3. CSS transforms occur in a single pass, so ordering of CSS expressions matters.

Hope this short note helped!