The CMSB Cookbook

STYLING HOVER POPUPS WITH CSS AND PULLING THE POPUP TEXT FROM CMSB - Aug 6th, 2010


That’s what nikkijones wanted to do, have popups with additional information displayed to the right of a menu of links
when a visitor hovered over them.

It turns out to be pretty easy once you see how it works.

To give it a try, create a multi-record editor called popups with 2 fields Title and Content and create a few
records.(Pretty Basic)

Now create a list page viewer (popups.php) for that editor and put these CSS styles in the head section:

<style type="text/css">
#popup {
color: #000;
background-color: #ffffff;
font-family: arial;
}

#popup a, #popup a:visited {
position: relative;
display: block;
width: 100px;
line-height: 14px;
text-align: left;
padding: 0 0px;
margin: 0;
border: 0px solid #666;
text-decoration: none;
font-size: 1em;
font-weight: bold;
}

#popup a span {display: none;}

#popup a:hover { background-color: #00ffff; }

#popup a:hover {
color: #f00; background-color: #00ffff;
text-indent: 0;
}

#popup a:hover span{
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #ffffff;
font-weight: normal;
background: #222222;
text-align: left;
border: 5px solid #666;
}
</style>

The body code that pulls the popup test from the “content” field is:

<div id="popup">
<?php foreach ($popupsRecords as $record): ?>
<a href="<?php echo $record['_link'] ?>">
<font color="#000000">
<?php echo $record['title'] ?></font>
<span>
<?php echo $record['content'] ?></span></a>
<?php endforeach; ?>
</div>

You can style the popups to suit your needs (I doubt that you’ll like my sample sizes and color scheme .)

The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.