Wickham's HTML & CSS tutorial

Sitemap | Home | Search

Hover popups

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Popup on hover link; either image or information panel

1 green icon Each menu item has a link and a popup which can be an image or a panel with further information.
The code is nearly all in the stylesheet and operated from the combination of a div id="popup" with the style for a:hover span which means it works when the span tag follows a hover on the a href link in a div id="popup" but not on a hover used elsewhere.
There cannot be links in the popups. Use dropdown menus to achieve this.

The code for these buttons is:-

<div id="popup">
<a href="introduction.php">Home<span><img src="littleegret.jpg" alt="Little Egret"></span></a>
<a href="dropdownmenus.php">Dropdown menus<span>Further information:-<br> Only one link can be opened (the one on the menu button), no links are possible in this panel.<br> Use dropdown menus for several dropdown links.</span></a>
<a href="links.php"><img style="padding: 2px 0 0 0;" src="images/beetle50x50.jpg" alt="beetle"> <span>Icon instead of text menu button which could be an image button with text on it.<br> The code isn't intended to work with an icon but it does work.<br> Only one link can be opened (the one on the icon button), no links are possible in this panel.<br> Use dropdown menus for several dropdown links. </span></a>

All the complications are in the stylesheet. See the /*HOVER POPUP LINKS*/ sections here.


Larger image on hover over icon, with link

2 green icon The small icons need to be the same size and ideally the larger images should also be the same size with a designated space where they can display without covering other content.

The icon and the larger image both form a link but only the icon link can be used as the mouse cannot reach the image to activate it unless the image is adjacent to the icon. The link can be disabled by putting #thumb in the href=" " if it is only required to show the larger image.

Little Egret Little Egret
Little Egret
Red-legged PartridgeRed-legged Partridge
Red legged Partridge
Cock PheasantCock Pheasant
Cock Pheasant running fast

The code for the first of these popups is:-

<a class="thumbnail" href="introduction.php">
<img src="images/littleegret50x50.jpg" alt="Little Egret" width="50px" height="50px" border="0"><span><img src="images/littleegret200x200.jpg" alt="Little Egret"><br> Little&nbsp;Egret</span></a>

The above examples expect an image popup from an image icon with text immediately following the image inside the span tag without any tag around the text, not a div with text and not text without an image. Use item 1 popup on hover for a panel with only text.

All the complications are in the stylesheet. See the /*THUMBNAIL HOVERPOPUPS*/ section here.

The style in the stylesheet has a standard offset for width and height which results in each popup offset by the same amount that the original icon is offset from its neighbour. If you want all the popups to show in the same place an individual adjustment has to be made to each popup image in the html file. The first popup of the first row needs no adjustment; it takes the standard stylesheet position. The second and subsequent images in the same row will have only a left value adjustment but if there are icons in two or more rows, the first popup in the second row will have only a top value and the second and subsequent popups in the second row will have a top and left adjustment.

In the examples above the stylesheet has .thumbnail:hover span{ visibility: visible; left: 300px; top: 5px; } so that the first popup is lower than its icon by 5px and has the icon 300px to its left and the others have an additional left value adjustment in the html file.

The code for the adjustment of the second popup is:-

<a class="thumbnail" href="links.php"><img src="images/partridge50x50.jpg" alt="Red-legged Partridge" width="50px" height="50px"><span style="left:240px;"><img src="images/partridge200x200.jpg" alt="Red-legged Partridge"><br>Red&nbsp;legged&nbsp;Partridge</span></a>

Note the addition of style="left: 240px" in the <span> for the popup because the icon plus its padding is 60px further right than the first one so the popup, in order to stay in the same place as the first popup, needs to be 60px less than the standard offset, ie 300-60=240px.

Each popup will require a different value achieved by trial and error though you should be able to get close with the first attempt by estimating the width of the icon and its padding from its neighbour. Deduct this value from the standard offset in the stylesheet for the second popup and increase the adjustment by the same amount for each further image (assuming all icons are the same size).


See some more examples of hover popups at dynamicdrive.com

A simple tooltip on hover

3 green icon Here's a simple tooltip on the link below that uses a span tag to create a separate box with the tooltip.

The styles in the head section style tags of this page (which should preferably be in a separate stylesheet) are:-

The html markup is:-


View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2010

top | Sitemap | prev | next


web www.wickham43.net/