borgboy

The Annotation WP plugin provides a user friendly shortcode wrapper for the jQuery UI ToolTip Widget as well as the standard UI themes. Default functionality is provided out-of-the-box for those who require simple, yet aestechtically pleasing tooltips. For those who need more control over the look-and-feel of the tooltip, advanced customization directives are available. Customizations can also be applied independently to each annotation. Both text and images can be used for anchors and HTML can be used freely in content.
<h3>Documentation</h3>
Annotation mark-up can take two forms differing only in content declaration.
<pre><code> [annotate id="" text="" img="" content="" theme="" style=""]
</code></pre>
or, more elegantly,
<pre><code> [annotate id="" text="" img="" theme="" style=""]<Content>[/annotate]
</code></pre>
The latter should be used if HTML mark-up is included in the content.
Id 
The id provides Annotation a mechanism to distinguish between multiple annotations in content rendering. Without it, Annotation can not set a theme or style for the tooltip. If included, id’s should at the very least be unique enough not to conflict in a single post. Otherwise one annotation will take precedence over the other. If id is not provided, theme and style are ignored and content is placed inline (using the title attribute for a text anchor, alt for image anchor), with mark-up [in content ]treated as raw text.
Content 
This is the content that will appear in the tooltip pop-up window. It can be specified either as an attribute or between the shortcode delimiters. It can be text, an image, or a mixture of the two. When using… HTML is allowed, but [in this situation,] an id is required and the content should appear between shortcode delimiters. By not doing so, the HTML will appear as raw text in the pop-up. For simple text, do keep the content as an attribute and skip specifing an id as this will yield a small gain in performance for your website.
Text 
The text attribute sets the text used for the anchor. CSS properties for the text should be specified outside of the annotation shortcode directives. Typically, the following format is followed: 
 ‘[annotation text=”archival”]’ 
If the img attribute is provided, text is ignored. Either text or img must be provided, otherwise the annotation is ignored.
Image 
Images of varying sizes can be used in place of text for the anchor. As with the text attribute, CSS can be specified outside of the annotation shortcode. If img and text are both provided, the text attribute is ignored. If no img or text attributes are provided, the annotation is ignored.
Themes 
While WordPress makes avialable the majority of the jQuery UI implementation, it fails to provide any themes. The resultant lack of these CSS files is that some of the widgets do not work as expected and/or have no default look-and-feel. These CSS theme packages are included in the Annotation plugin for both the latest version of jQuery UI (1.10.3) and the targeted version of jQuery UI used by WordPress (1.9.2 as of this writing). Annotation is able to choose the correct version based on the enqueued jQuery UI JavaScript. Users should not attempt to override this behavior. The theme defaults to cupertino when the theme attribute is not specified.
User Themes 
Users are welcome to install their own rolled themes (http://jqueryui.com/themeroller/) under the Annotation themes directory. Be sure to include css files for all working versions and choose the name carefully to avoid conflicts or malformed URLs. Be aware that any updates will remove these themes, so please make back-ups as appropriate.
Style 
xxx Keep in mind that the style attribute applies to the tooltip, not the anchor. CSS for the anchor can be set outside of the annotation using span. The style attribute is particularly important in that it allows you to change aspects of the container for the tooltip. Most often, users will want to use this to set the maximum width of the tooltip or minor adjustments to the underlying theme. Styling for the tooltip content can be accomplished using mark-up in the content. JQuery UI elements require JSON encoded CSS which imposes some limitations on the style properties that you can specify. Color names cannot be used. Instead use rgb or rgba. DOM names are not necessary, however. See future for more details.
Future 
JQuery UI Effects are not currently supported. However, if there is sufficient interest in their usage, this may change. It is also expected that interest in jQuery UI themes may result in a shortcode or option to include a specific theme for use by other jQuery UI widgets. Or, perhaps, the Annotation plugin may evolve to include all jQuery UI widgets. 
Currently, a simple converter is provided for CSS text to JSON encoded CSS properties. A full conversion utility would inevitably create code bloat for this plugin and the inherit limitations are considered trivial. For these reasons, the gains from such a conversion utility are not deemed significant enough to warrant it’s implementation.

Annotation

The Annotation WP plugin provides a user friendly shortcode wrapper for the jQuery UI ToolTip Widget as well as the standard UI themes.

setzer

Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.
To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the <code>[ref]</code> shortcode, like so:
<pre><code>Here's the text to annotate.[ref]Note text goes here.[/ref]
</code></pre>
To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.
<h3>Styling Side Matter with CSS</h3>
Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (<a href="https://wordpress.org/plugins/simple-custom-css/" rel="ugc">Simple Custom CSS</a> is a good example.)
Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class <code>side-matter</code>. The following CSS will render all Side Matter elements in blue serif text:
<pre><code>.side-matter {
 color: blue;
 font-family: serif;
}
</code></pre>
Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:
<pre><code>a.side-matter-ref, ol.side-matter-list {
 color: green;
}

div.side-matter-text {
 color: black;
}
</code></pre>
<h4>List of Class Selectors</h4>
Here is a full list of Side Matter class selectors and their uses:
<ul>
<li><code>a.side-matter-ref</code> selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.</li>
<li><code>sup.side-matter-sup</code> selects the <code>sup</code> (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.</li>
<li><code>.widget_side_matter</code> (note the underscores) selects the widget container element, which may be an <code>aside</code> or a <code>div</code>.</li>
<li><code>ol.side-matter-list</code> selects the <code>ol</code> (ordered list) element that encloses notes in the sidebar, including list numerals.</li>
<li><code>li.side-matter-note</code> selects sidenote <code>li</code> (list item) elements, including each note’s numeral.</li>
<li><code>div.side-matter-text</code> selects the <code>div</code> elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.</li>
</ul>
Each paragraph within a note is further wrapped in a <code>p</code> tag. However, as they’re generated outside the plugin, these <code>p</code> elements cannot be selected directly using the <code>side-matter</code> class. Instead, select them indirectly, e.g. <code>div.side-matter-text > p</code>.
<h4>Default CSS</h4>
Side Matter sets a few rules by default in the included stylesheet <code>side-matter.css</code>. These rules will generally defer to your theme stylesheet in the event of a conflict.
The first rule removes underlines from reference numeral links:
<pre><code>a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
 text-decoration: none;
}
</code></pre>
The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:
<pre><code>sup.side-matter-sup {
 position: relative;
 top: -0.5em;
 vertical-align: baseline;
 font-size: 0.75em;
 line-height: 0;
}
</code></pre>

Side Matter

Turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text.

Annotation vs Side Matter