Again, see my disclaimers in the last post.


I want to share something from a personal project of mine.  I have a similar need for this type of functionality at work, so I had reason to prototype with a project at home.  It takes a while to figure these tricks out, and I wish someone had posted this OPA code on the Internet.


Background: I play D&D with my family, and I have a need to convert D&D 4 encounters to D&D 5e encounters for a campaign that our family has been playing since 2007...


Monster/encounter conversion may seem simple, but it isn't simple because D&D 5e comes with its own set of rules for monsters and encounters.  Some of the 5e rules are very involved and thus are not automated anywhere I can find for free on the Internet.  This is the reason manual conversions are so dang difficult.  (Really, I automated about 15 pages of 5e rules.  5e, btw, is considered simpler that 4...)


So, I wrote my own encounter ruleset for my family campaign, although I won't share it for fear of legal issues with Wizards of the Coast.  This project is just for our family use anyway...


BUT, one challenge that I had was reminding myself all the implications of setting various attributes such as "Hit Die".  I didn't want to clutter up my interview screen with d&d notes...  What to do?




I succeeded with popups in several ways, but I will show a simple method that allows the content of the popup to include attribute values...


First, the top of the interview screen is shown here.  Everything in blue has a popup that reminds me of what is possible and impacted per the 5e rules.  Further, the popups have OPA attributes embedded in them.


Now a demonstration screenshot of one of the Popups.  (Btw, this popup uses rules to compute the proper hit die per 5e rules when given creature size, constitution, and hp.  The "8d10 + 24" was created with OPA rules and is in an attribute.)

Kind of cool???  Click the blue text and get a popup!  Click the popup and it goes away.


In my development tab, it looks as follows:

Notice how I use properties on a label.  Also, note the label/popup has an attribute in it that can change depending on fields in the interview.  That means the text in the popup has to be dynamic... 


The javascript:

// Lets make a popup function... Here are the necessary properties:



// type : Popup

// title : <<Text such as "click me...">>

// id : <<an id for this popup>>


   customLabel: function(control, interview) {

     if (control.getProperty("type") == "Popup" ) {

     var x;

     var t;

       return {

         mount : function(el){

           x = document.createElement("DIV");

           x.className = "popup";

           x.onclick = function() {

             var popup = document.getElementById(control.getProperty("id"));



           x.innerHTML = control.getProperty("title");

           t = document.createElement("SPAN");

           t.className = "popuptext";

  = control.getProperty("id");

           t.innerHTML = control.getCaption();




         update : function(el){

           t.innerHTML = control.getCaption();







The CSS:

/* Popup container */


.popup {

   position: relative;

   display: inline-block;

   margin-left: 10px;

   margin-right: 10px;

   color: blue;

   cursor: pointer;


/* The actual popup (appears on top) */

.popup .popuptext {

   visibility: hidden;

   width: 600px;

   background-color: #555;

   color: #fff;

   text-align: left;

   border-radius: 6px;

   padding: 8px 0;

   position: absolute;

   z-index: 1;

   bottom: 125%;

   left: 50%;

   margin-left: -80px;


/* Popup arrow */

.popup .popuptext::after {

   content: "";

   position: absolute;

   top: 100%;

   left: 10%;

   margin-left: -5px;

   border-width: 5px;

   border-style: solid;

   border-color: #555 transparent transparent transparent;


/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {

   visibility: visible;

   -webkit-animation: fadeIn 1s;

   animation: fadeIn 1s


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {

  from {opacity: 0;}

  to {opacity: 1;}


@keyframes fadeIn {

  from {opacity: 0;}

  to {opacity:1 ;}







Finally, I couldn't resist but use BI Publisher...  (Notice the Hit Die from above populated next to the Hit Points...)  I haven't had time to write rules for special qualities or actions, so ignore those areas.


For anyone who wonders, all the coding for D&D 5e creature rules could be done in only two weekends. Try doing that with just Excel...


I hope you can make use of this how-to code for popups/tooltips in OPA.   Let me know in comments if you take any of this code and modify it for your own projects, please.