refNote: Generate a popup reference note

In rmdHelpers: Helper Functions for Rmd Documents

Generate a popup reference note

Description

Generates the html needed to include a popup reference note. Note requires inclusion of javascript libraries for this to function.

Usage

refNote(text = "This is a test note", number = "*")

Arguments

text	Note to include in popup. Line breaks occasionally cause problems. As this is generally for short notes; I have not come up with a general solution yet. If your note text is complicated, ensure that you check the result.
number	The label to identify the note in the text.

Value

The html for the popup note

Note

The html page also needs to include the javascript and css to process the notes for these to work. Specifically, need to include the following (generally in the header):

<!-- The javascript to run the popup refernce notes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      jQuery.noConflict();
      jQuery(function() {
        jQuery(".refbody").hide();
        jQuery(".refnum").click(function(event) {
          jQuery(this.nextSibling).toggle();
          event.stopPropagation();
        });
        jQuery("body").click(function(event) {
          jQuery(".refbody").hide();
        });
      });
    </script>

And the following to wherever you include you css definitions:

/* the reference tooltips style starts here */
/* This was stolen from the What If? css sytle sheet
 *  at https://what-if.xkcd.com/css/style.css
 *  in an effort to emulate that style  */

.ref {
    position: relative;
    vertical-align: baseline;
   }

.refnum {
    position: relative;
    left: 2px;
    bottom: 1ex;
    font-family: Verdana, sans-serif;
    color: #005994;
    font-size: .7em;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.refbody {
    font-family: Verdana, sans-serif;
    font-size: .7em;
    line-height: 1.1;
    display: block;
    min-width: 20em;
    position: absolute;
    left: 25px;
    bottom: 5px ;
    border: 1px solid;
    padding: 5px;
    background-color: #fff;
    word-wrap: break-word;
    z-index: 9999;
    overflow: auto;
}

Author(s)

Mark Peterson

References

This was based on the popups on the https://what-if.xkcd.com/ site

Examples

cat(refNote())

cat(refNote("Any text can go in here", 42))

rmdHelpers documentation built on Sept. 12, 2024, 9:35 a.m.