|
Cookbook /
CSSPopupsSummary: How to make popups with CSS
Version: 2006-08-30
Prerequisites: pmwiki 2.1
Status:
Maintainer: DaveG
Questions answered by this recipeHow to make popups with CSS DescriptionCreate popup links by inserting the popup content with a popup style into the link text. This will create a <span> element. Define the hover effect in CSS for the span.popup class. The CSS styles for this page are (will hopefully be) defined in Site.StyleSheet-CSSPopups using Tooltip style popups: Hover over the links in the boxes below to see the popup messages.
Try this CSS code for creating tooltip style popups shown above: /* ===== Tooltip Popups (relative positioned) =====*/
span.poptip { display:none; background-color:#ffffcc; }
a:hover span.poptip {
display:block; position:absolute; margin-left:50px;
width:200px;
font-size:smaller;
text-align:center;
padding:5px;
border: 1px solid black;
}
Absolute positioned popups: Hover over the links in the boxes below to see the popup messages.
And this CSS code for absolute positioned popups shown above: /* ==== Absolute positioned popups ====*/
->[@span.popup { display:none; background-color:#ffddcc; }
a:hover span.popup {
display:block; position:absolute; right:0; top:1300px;
width:140px;
font-size:smaller;
text-align:center;
padding:5px;
margin:0 10px;
border: 1px solid black;
}
NotesLimitation: Does not work with IE.
Release Notes
CommentsWOW. 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
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 PMyeah, 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. 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
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
See Also
ContributorsSandboxFooter status style popups: Hover over the links in the boxes below to see the popup messages.
|