CSSPopups-Talk

Summary: Talk page for CSSPopups.
Maintainer: DaveG
Users: +2 (View / Edit)

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.

Comments

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

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

Site.StyleSheet-CSSPopups is enabled for this page. The second example did not seem to work, because the links where way down on the page, and the popup near the top. I adjusted the vertical position now. The popuup foote rI can't get to work, links are at the page bottom now for testing, but still no popup at bottom:0. Perhaps bottom:0 is not recognised? -- HansB September 05, 2006, at 02:37 AM
Odd, the exact same settings work fine on my site and I just confirmed that it works with PmWiki skin. I'll have to return to tinker with the setttings. For now, I will condition out that example. Pico September 05, 2006, at 06:56 AM
  • great recipe! is it possible to include images into the tooltips?
tirosh? February 03, 2007, at 06:44 AM
you could try and add a background-image to the css, like span.poptip {background:#ffc url(path-to-image/image.gif) no-repeat;} - HansB
This is the CSS I use for just that thing, plus rounded-corners(Need mod for this cookbook):
/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 0 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
margin-left:-150px
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(images/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(images/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(images/bubble.gif) no-repeat bottom;
}
CoreyReichle November 19, 2009, at 12:43 PM
  • Something like this should work for IE. I use it on some of my sites, and it's cross-browser:
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;} /*This part is the key part, so the bg changes on hover */
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 0 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
margin-left:-150px
}

Talk page for the CSSPopups recipe (users).