Pure CSS popups
Much of the following is based on Eric Meyers's work on his website (CSS Edge). The idea is to have supporting text "appear" when the mouse is over a certain item (in this instance a button containing a hyperlink) and disappear when the mouse moves away. This is fairly easily done using Javascript but some users either do not use this or have it turned off. In addition a CSS solution is smaller in size than the equivalent Javascript solution.
There are several extensions to Meyers' work available on the web but none that I have found are truly generic. This may be impossible due to the current incomplete support for CSS2 amongst browsers.
The basic layout of my site is the traditional three column layout though only the centre column is really visible with the left and right hand columns acting as gutters. There is no need for the left column except as a holder for the link buttons. It is these buttons that I am adding tooltip style popups to.
Eric Meyers's solution also uses a three column layout and creates a menu structure of a known size and places the popup at the foot of the area occupied by the menu. When the mouse moves over a menu item the relevant text is displayed. Unfortunately, my site uses menus with varying numbers of button links - some have four buttons - some have twelve or more. Thus placing the popup at the foot of the menu is not going to work in a consistent manner.
My first attempt did not use Eric's code at all - within HTML itself is a possible solution: the title attribute. This attribute is available to most HTML elements and uses the popup code of the OS of the browser to generate the popup. Hold the mouse over the word "HTML" in the previous sentence for a few seconds to see this. To get this effect simply requires the following:
<span >title="Hypertext Markup Language">HTML </span>
All well and dandy. Applying this to my list of links and it worked! There was one browser that doesn't play ball though and for once it is not Internet Explorer. Opera displays the linking address in the tooltip not the intended text. Back to the drawing board.
The next attempt was a variation on Meyers's code. Rather than have the popups at the foot of the table of links - have it at the top! With a little negative positioning and ensuring that the text appearing in the popup was not too long to overwrite the menu below it worked. I had to specify both the width and height of the popup though to ensure that it did not overlap the menu, whereas Erics original could extend as necessary as there was no content beneath it.
What I was after though was to have the popup appear down and right of the chosen button. Altering the offsets in the CSS file showed the requisite text appear to the right with one problem: on Internet Explorer the right hand side of the text was hidden by the content of the central column! Opera and Firefox were fine. What appears to be happening is that IE reads the html and fixes the positions of the elements as it finds them, even though the default state for the popup is block:none it is as if the anchor for it has been allocated. When the mouse is moved over the button the popup is displayed but content in the centre still sits above it. Setting the z-index to a high value made no difference.
The fix for this required a little lateral thinking. I was using CSS for positioning elements - this is a bit like locating pieces in a jigsaw puzzle - as they will only fit in the place they are intended, it doesn't matter in what order the pieces are presented! So I moved the DIV section holding the list of button links to a point in the source file after that for the central column. Yes!
Now I had a popup that appears in its customary or expected position. The only downside is that it is fixed to an offset of the top left of the list. This is because the CSS is bound to an ID - that of the enclosing DIV. Another rethink! I had worked from the original CSS and HTML of Eric Meyers which used a single named DIV that surrounded an unordered list. Now the unordered list is a convenient way to group things together but it appeared as if it was causing the problem. So I removed the original DIV and UL elements and wrapped each element of the original list with their own DIVs - links01, links02, etc and provided CSS markup for each of these DIVs.
#links01, #links02 {
z-index: 100;
left: 0px;
font: 12pt verdana, sans-serif;
width: 200px;
position: absolute;
}
#links01{
top: 80px;
height: 50px
}
#links02{
top: 108px;
height: 50px
}
#links01 a, #links02 a {
border: #000000 1px solid;
padding-right: 2px;
display: block;
padding-left: 10px;
background: #a9a9a9;
padding-bottom: 2px;
font: 12pt verdana, sans-serif;
width: 200px;
padding-top: 2px;
text-align: center;
text-decoration: none
}
#links01 a:link, #links02 a:link {
color: #000000
}
#links01 a:active, #links02 a:active {
color: #000000
}
#links01 a:visited, #links02 a:visited {
color: #000000
}
#links01 a:hover, #links02 a:hover{
border: #000000 1px solid;
background: #606060;
color: #ffc;
}
#links01 a span, #links02 a span{
display: none
}
#links01 a:hover span, #links02 a:hover span {
border: #000 1px solid;
padding-right: 5px;
display: block;
padding-left: 5px;
z-index: 100;
background: #ffffcd;
left: 230px;
padding-bottom: 5px;
margin: 10px;
font: 10pt verdana, sans-serif;
width: 200px;
color: #411;
padding-top: 5px;
position: absolute;
top: 20px;
text-align: left
}
One problem with this is that each new DIV requires its own specific positioning values so this technique is not ultimately as flexible as that of Eric Meyers. For example if I wish to insert a new link into the middle of the existing block then there is quite a bit of fiddling around to do. Also some of my menus have up to fifteen items so there are going to be a lot of #linksXX. Also the popup is fixed in its relative position to the button, whereas in IE the popup position is relative to the cursor position. This is a minor problem and requires Javascript to solve. There are several solutions available on Javascript sites.
On the plus side, I have got what I originally aimed for: Pure CSS popups that are consistently positioned relative to their target link. This means that I can have rounded borders or whatever style I choose.