CSSPopups

From http://www.pmichaud.com/pipermail/pmwiki-users/2006-August/031251.html

Hover over the links in the box below to see the popup messages.


* [[Main/HomePage | Home%popup% The main page of the site --a jumping-off point, as it were-- and not actually a picture of our house%%]]
* [[Main/WikiSandbox | Wiki Sandbox%popup% A place to test your editing skills%% ]]
* [[Site/AllRecentChangesShort | Recent Changes%popup% The latest happenings on this site %%]]
* [[PmWiki/DocumentationIndex | Documentation Index%popup% Learn how to use PmWiki %%]]

Here's the CSS file being used for this (pub/css/Test.CSSPopups.css):

span.popup { display:none; background-color:#ffffcc; }

a:hover span.popup {
  display:block; position:absolute; right:0; top:100px;
  width:200px;
  font-size:smaller;
  text-align:center;
  padding:5px;
  margin:0 10px;
  border: 1px solid black;
}

Try this css for a tooltip style of popup:

/* ========= Tooltip Popups ===============*/
span.popup { display:none; background-color:#ffffcc; }

a:hover span.popup {
  display:block; position:absolute; margin-left:50px;
  width:200px;
  font-size:smaller;
  text-align:center;
  padding:5px;
  border: 1px solid black;
}

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

It shouldn't ever go off screen, but it may overlap if you shrink the screen size.

It goes off the top of the screen for me, but does move left and overlap text when I shrink the screen. Using Firefox on WinXP ?, if that makes any difference.

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.

If the links are in the footer and you want the pop to appear in the footer, you'd need to set the footer div as position:relative. Then the pop up will be positioned absolutely, within the relative parent container. http://www.paulgiacherio.com/Test/Popup

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

I think if your anchors are set as position:relative, and the popup is set absolutely, you can mimic the action of a tooltip.

Thats right. But then there are some background and z-index issues.
So the css would become(works in firefox, konqueror):

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

yeah, I still think it's a suitable cookbook recipe even with IE problems. It should be explicit that IE breaks it but it's very interesting and worthy of further development. JonHaupt

If nothing else, it would be nice for randomly assigning assorted links to popup disparaging remarks about IE, which, ironically, IE would be incapable of displaying. Maybe even use that no IE icon on hoover.

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

Right. However it's the same concept used in css-based drop down and flyout menus. Here's a complex example- http://www.webreference.com/programming/css_style2/examples/list3.html PaulGiacherio

I am not pointing to the concept, but how would the browser renderer handle it.
One can do something like: (again this works in firefox)

<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>

And use the style:

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