CSS - Create a pop-up (no JavaScript)

July 2017






Here's how to create a popup in CSS, without making use of JavaScript

Use :hover to switch CSS when moving the cursor.
Among the modified CSS attributes, use display:none to hide/show the popup, depending on the position of the cursor.

A popup with a link


The content of the popup is placed in a <span> tag within the <a> tag
Here is the CSS code to add in the <head> your html file or in a separate CSS file:
a.info 
{ 
    position:relative; 
    z-index:24; background-color:#ddd; 
    color:#000; 
    text-decoration:none 
} 

a.info:hover {z-index:25; background-color:#ff0} 

a.info span{display: none} 

a.info:hover span 
{ 
    display:block; 
    position:absolute; 
    top:2em; left:2em; width:10em; 
    border:1px solid #0cf; 
    background-color:#555; color:#fff; 
} 


The HTML code to be inserted in your webpage:

    Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>. 


The results:

Without cursor:


With cursor:

A popup without link


If you just want to make a popup without any link, you can put href="#" in your <a> tag, but some browsers consider that "#" is a link to the top of the page.

To counter this, replace the <a> tag with a <span> tag (in HTML and CSS).
span.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    cursor: pointer;
}

Related


Published by jak58. Latest update on May 14, 2013 at 06:15 AM by deri58.
This document, titled "CSS - Create a pop-up (no JavaScript)," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).