<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="/modules/documentation/xml/mod_doc.xsl"?>
<module id="UDPopupBox">
  <demo-uri>html/index.html</demo-uri>
  <description>
    <p>
      Another piece of dynamicism that can make a web page less cluttered is to place expositional information that may not be relevant enough for inclusion in the document body itself in boxes that popup when the mouse hovers over a visible item.  For example, a page that touts the strong-points of the University may mention our strong athletics presence.  When the user's mouse hovers over "athletics presence" a popup box could be displayed which states just what athletics programs the University offers.
    </p>
    <p>
      The UDPopupBox module is a mechanism for easily adding hover-based popup boxes to pages.  The boxes can optionally have a title bar on them to indicate the relevance of the information, for example.  And it's all CSS-based, so the end-user need not have Javascript enabled for them to work.
    </p>
  </description>
  <code-sample>&lt;!-- The parent element to which the popup box is attached must have --&gt;
&lt;!-- the UDPopupBoxParent CSS class; the popup itself is minimally a span with --&gt;
&lt;!-- the UDPoupBox CSS class.  A div with class UDPopupBoxTitle should be used --&gt;
&lt;!-- if you want a title bar on the popup box. --&gt;
&lt;p class="UDPopupBoxParent" style="border-left:4px solid gray;padding-left: 8px;"&gt;
  &lt;!-- Force the positioning of the popup to be below the div and to the left --&gt;
  &lt;span class="UDPopupBox" style="top:100%;left:0;"&gt;
    &lt;div class="UDPopupBoxTitle"&gt;Did you know...&lt;/div&gt;
    A "lorem ipsum" is a large chunk of Latin often used to exercise text layout areas such as this HTML &amp;lt;p&amp;gt; element.
  &lt;/span&gt;
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam et ante vitae turpis bibendum consectetuer. Pellentesque pellentesque, ipsum vel rhoncus ultricies, neque erat laoreet lorem, eget tincidunt orci turpis in turpis. Donec lacus. Quisque non leo. Nulla risus. Pellentesque nec dui eget orci ullamcorper varius. Nullam vitae libero. Nulla hendrerit hendrerit purus. Donec egestas blandit nibh. Maecenas eu ligula quis orci malesuada ullamcorper. Pellentesque lacinia est sed justo. Duis cursus. Duis lacinia.
&lt;/p&gt;</code-sample>
  <css>
    <file>
      <name>UDPopupBox.css</name>
    </file>
  </css>
</module>

