• View
• Edit
• History
• Attach
• Print
• Backlinks

CSSPopups-Talk

Comments

WOW.
(I am concerned about the position of the popup, at top right. That could easily be off-screen. What alternatives?) -- TeganDowling

A very basic CSS question: If I wanted to position the display in an available div that has been defined by my skin, e.g. in a footer, what would I use instead of the absolute positioning.

Surely this needs some form of relative positioning (for the hover text). If I position the sample links near the top of my browser window, then the popup is not visible as it's opening out of sight, somewhere above the visible area. You can't depend on the user to position their window to suit an absolute location. It needs to be more like a ToolTip, and open a few px away from the link. Des

span.popup { display:none; background-color:#ffffcc; }
a { 
position:relative;
background-color:white;
}
a:hover span.popup {
  display:block; 
  position:absolute; 
  width:200px;
  font-size:smaller;
  text-align:center;
  padding:5px;
  margin:0 10px;
  border: 2px solid black;
  z-index:2;
}

pm could you pls give it a try. VKrishn August 28, 2006, at 12:47 PM

Here's a test with anchor position:relative. http://www.paulgiacherio.com/Test/Popup2 You can set the position of the box as top:20px and right:-210px (for instance) That puts the box consistently beyond the lower right corner of the link. Works great in Firefox, but doesn't even work in Opera, let alone IE. PaulGiacherio

I thought these css popups warrant to be a cookbook recipe. But they do not work in IE. HansB

So few things do: even the default pmwiki skin is broken by IE (5.2 for Mac). The top right elements (Recent changes and search) appear on the left, on top of the PmWiki logo. How I wish IE could just be ignored instead of being the subject of a thousand hacks and work-arounds. Pico August 28, 2006, at 03:29 PM

Technically speaking I don't think the above kind of tooltip should be working in any browser. Sounds kinda wierd in terms of UI rendering.
Think an anchor link like an elastic-band. Now, here we are trying to pinch some part of band and making it absolute positioned, hmmm.. kinda floating free, whereas the rest of the links are grounded on earth(relative). So the browser renderer has to extend the mouse click of the HREF on the anchor from ground to where-ever the tooltip floats. Ouch...how does it sound.
VKrishn August 29, 2006, at 10:36 AM

<ul>
<li>
<a class='wikilink' href='http://www.pmwiki.org/wiki/Main/HomePage'>Home</a>
<span class='popup'> The main page of the site --a jumping-off point, as 
it were-- and not actually a picture of our house</span>
</li>
</ul>

span.popup { display:none; background-color:#ffffcc; }
a:hover + span.popup {
  display:block; 
  position:absolute; 
  width:200px;
  font-size:smaller;
  text-align:center;
  padding:5px;
  margin:0 10px;
  border: 2px solid black;
}

VKrishn August 29, 2006, at 12:06 PM

Pm enabled this page, but its not clear what page is providing the CSS. The recipe suggests Site.StyleSheet-CSSPopups, which contains the styles of each of the three examples on this page, but right now only the first example appears to be working. Pico

• great recipe! is it possible to include images into the tooltips?

• Something like this should work for IE. I use it on some of my sites, and it's cross-browser: