• View
• Edit
• History
• Print
• Backlinks

CSSPopups

Questions answered by this recipe

How to make popups with CSS

Description

Create 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 (:stylepage:) markup (see CSSInWikiPages)

Tooltip style popups: Hover over the links in the boxes below to see the popup messages.

* [[Main/HomePage | Home%poptip%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%poptip% A place to test your editing skills%% ]]
* [[Site/AllRecentChangesShort | Recent Changes%poptip% The latest happenings on this site %%]]
* [[PmWiki/DocumentationIndex | Documentation Index%poptip% Learn how to use PmWiki %%]]

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.

* [[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 %%]]

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

Notes

Release Notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See Also

• Test.CSSPopups original page

Contributors

• HansB

Comments

See discussion at CSSPopups-Talk