Very simple popup box with curved edges and a transparent background
/**
* These styles are used for help popups or whatever else you need them for.
*/
span#hov_span1 {
position:relative;
}
div.hov_div {
display:none;
}
span#hov_span1:hover div.hov_div {
/* minimum styles */
display:block;
position:absolute;
top:0;
left:0;
/* extra fancying style */
width:200px;
overflow:auto;
background-color:#f8f3d2;
border:1px solid #6d6e70;
margin:0;
padding:8px;
/* the topleft corner is still a hard right angle */
-webkit-border-radius:8px;
-moz-border-radius:8px;
-moz-box-shadow:4px 4px 4px silver;
-webkit-box-shadow:4px 4px 4px silver;
-o-box-shadow:4px 4px 4px silver;
box-shadow:4px 4px 4px silver;
opacity:0.9;
-ms-filter:'alpha(opacity=90)';
filter:alpha(opacity=90);
}
* These styles are used for help popups or whatever else you need them for.
*/
span#hov_span1 {
position:relative;
}
div.hov_div {
display:none;
}
span#hov_span1:hover div.hov_div {
/* minimum styles */
display:block;
position:absolute;
top:0;
left:0;
/* extra fancying style */
width:200px;
overflow:auto;
background-color:#f8f3d2;
border:1px solid #6d6e70;
margin:0;
padding:8px;
/* the topleft corner is still a hard right angle */
-webkit-border-radius:8px;
-moz-border-radius:8px;
-moz-box-shadow:4px 4px 4px silver;
-webkit-box-shadow:4px 4px 4px silver;
-o-box-shadow:4px 4px 4px silver;
box-shadow:4px 4px 4px silver;
opacity:0.9;
-ms-filter:'alpha(opacity=90)';
filter:alpha(opacity=90);
}
<html>
<head>
<title>Popup test</title>
<style type="text/css">
/**
* Enter the styles above into this style block
*/
</style>
</head>
<body>
<span id="hov_span1">Some word or image<div class="hov_div">Here is the content that will popup.</div></span>
</body>
</html>
<head>
<title>Popup test</title>
<style type="text/css">
/**
* Enter the styles above into this style block
*/
</style>
</head>
<body>
<span id="hov_span1">Some word or image<div class="hov_div">Here is the content that will popup.</div></span>
</body>
</html>
So you should only see "Some word or image" and when you hover over that, the div with class hov_div will popup.
[Click to add or edit comments])
Please prepend comments below including a date