diff --git a/docs/user-guide.md b/docs/user-guide.md
index ff5831187..26c842bf4 100644
--- a/docs/user-guide.md
+++ b/docs/user-guide.md
@@ -1,181 +1,226 @@
-# User Guide
-
-This page contains the complete list of "tips" available through JetUML's "Tip of the Day" dialog. Click on an entry to expand with details.
-
-<div id=body></div>
-
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-<style>
-
-  /* Snippet inspired from https://www.w3schools.com/howto/howto_js_collapsible.asp */
-  .collapsible 
-  {
-    background-color: #DCDCDC;
-    color: black;
-    cursor: pointer;
-    padding: 15px;
-    width: 100%;
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: 15px;
-  }
-
-  .active
-  {
-    background-color: #C0C0C0
-  } 
-
-  .collapsible:hover 
-  {
-    background-color: #AFDBF5;
-  }
-
-  .content 
-  {
-    padding: 0 15px;
-    overflow: hidden;
-    background-color: #f1f1f1;
-    max-height: 0;
-    transition: max-height 0.2s ease-out;
-  }
-
-  .br
-  {
-    margin-top: 2px;
-  }
-
-</style>
-
-
-<script>
-
-  // fetching the properties to get the number of tips and adding tips to the DOM
-  jQuery.get('../src/ca/mcgill/cs/jetuml/JetUML.properties', data => 
-    {
-      var numTips = getNumTips(data);
-
-      for(var j = 1; j <= numTips; j++)
-      {
-        var tipFileName = "tip-" + j + ".json";
-        var tipPath = "../tipdata/tips/" + tipFileName;
-
-        // requesting the tip json for the j'th tip and adding it to 
-        // the DOM with parseTip
-        $.ajax(
-          { 
-            url: tipPath, 
-            dataType: 'json', 
-            data: data, 
-            async: false, 
-            success: parseTip
-          } 
-        );
-      }
-    }
-  );
-
-  // function that takes in the JetUML properties file as data and 
-  // extracts the tip quantity property
-  function getNumTips(data)
-  {
-    var numTips = 0;
-    var lines = data.split("\n");
-    for(var i = 0; i<lines.length; i++)
-    {
-      var line = lines[i];
-      if (line.includes("tips.quantity="))
-      {
-        numTips = line.split("tips.quantity=")[1];
-        break;
-      }
-    }
-    return numTips;
-  }
-
-  // function that takes in a tip json and parses it to add nodes containing the tip
-  // contents to the DOM
-  function parseTip(tipData)
-  {
-    // The div containing the contents of a given tip
-    var tipContentDiv = $('<div/>', 
-      {
-        class: "content",
-      }
-    );
-
-    // the button that opens up the tip content
-    var collapsibleTip = $('<button/>', 
-      {
-        text: tipData["title"],
-        class: 'collapsible',
-      }
-    );  
-    //adding both to the body div
-    $("#body").append(collapsibleTip);
-    $("#body").append(tipContentDiv);
-
-    // adding handler for the button
-    collapsibleTip.on("click", function() //function snippet taken from 
-      { //https://www.w3schools.com/howto/howto_js_collapsible.asp
-        this.classList.toggle("active");
-        var content = this.nextElementSibling;
-        if (content.style.maxHeight) 
-        {
-          content.style.maxHeight = null;
-        } 
-        else 
-        {
-          content.style.maxHeight = content.scrollHeight + "px";
-        }
-      }
-    );
-
-    addTipToDiv(tipData, tipContentDiv);
-    
-    // adding a <br> to separate the buttons 
-    $("#body").append($('<br/>',
-      {
-        class: 'br',
-      }
-    ));
-  }
-
-  // function that takes in the data of a tip json and the div to which the 
-  // tip contents should be added to add the tip contents to the div
-  function addTipToDiv(tipData, tipContentDiv)
-  {
-    var content = tipData["content"];
-
-    // looping over the tip contents and adding the tip elements to tipContentDiv
-    for (var k = 0; k<content.length; k++)
-    {
-      var tipElement = content[k];
-      for(var type in tipElement)
-      {
-        if(type == "text")
-        {
-          //creating a <p> node with the text
-          var tipText = $('<p/>', 
-            {
-              text: tipElement["text"],
-            }
-          );
-          tipContentDiv.append(tipText);
-        }
-        else if (type == "image")
-        {
-          //creating an <img> node with the image
-          var tipImage = $('<img/>', 
-            {
-              src: "../tipdata/tip_images/" + tipElement["image"],
-            }
-          );
-          tipContentDiv.append(tipImage);
-        }
-      }
-    }
-  }
-
+# User Guide
+
+This page contains the complete list of "tips" available through JetUML's "Tip of the Day" dialog. Click on an entry to expand with details.
+
+<div id="body">
+<button class="collapsible">Creating a New Diagram</button>
+<div class="content">
+<img src="../tipdata/tip_images/tip1.png">
+<p>You can create a new diagram at any point using the menu command File | New. The diagram will open in a new tab.</p>
+</div>
+<button class="collapsible">Creating Nodes</button>
+<div class="content">
+<p>Selecting a node type in the toolbar enables the corresponding Node Creation tool. With a Node Creation tool enabled, click on an empty space in the diagram to create a new node of that type. Rolling over the tool in the toolbar shows a tooltip with the name of the node type.</p>
+<img src="../tipdata/tip_images/tip2.png">
+</div>
+<button class="collapsible">Creating Edges</button>
+<div class="content">
+<p>To create an edge between two nodes, select an Edge Creation tool in the toolbar, click in the start edge, then start dragging with the mouse. This will enable a rubber band view of the start and end nodes for the edge. Release the mouse on the destination edge to complete the operation. Edges are laid out automatically: to control their path it is necessary to move their start and end nodes. The edge creation operation will not have any effect if the edge type is not a valid way to connect the selected nodes.</p>
+<img src="../tipdata/tip_images/tip3.png">
+</div>
+<button class="collapsible">Selecting Diagram Elements</button>
+<div class="content">
+<p>To select diagram elements individually, enable the Selection tool and click on the element to select or deselect. To add or remove individual elements to/from the selection, hold down the Ctrl key while clicking on the element.</p>
+<img src="../tipdata/tip_images/tip4.png">
+</div>
+<button class="collapsible">Selecting With the Lasso Tool</button>
+<div class="content">
+<p>To select all elements in a region of the diagram, enable the Selection Tool, then click and drag from an empty space in the diagram. This will enable the Lasso tool. </p>
+<img src="../tipdata/tip_images/tip5.png">
+</div>
+<button class="collapsible">Editing Element Properties</button>
+<div class="content">
+<p>You can edit an element's properties by double-clicking it or by using the shortcut Ctrl-Enter on a selected element.</p>
+<img src="../tipdata/tip_images/tip6.png">
+</div>
+<button class="collapsible">Edge Validation</button>
+<div class="content">
+<p>When attempting to create a new edge, the operation will only succeed if the edge is a valid connection between two elements according to the syntax of the diagram.</p>
+<img src="../tipdata/tip_images/tip3.png">
+</div>
+<button class="collapsible">Tool Hints</button>
+<div class="content">
+<p>It is possible to view the name of each tool in the toolbar in full next to its icon. To toggle this feature, use the menu command View | Show Tool Hint.</p>
+<img src="../tipdata/tip_images/tip8.png">
+</div>
+<button class="collapsible">Popup Toolbar</button>
+<div class="content">
+<p>The toolbar is also available as a popup menu. Right-click anywhere to show it.</p>
+<img src="../tipdata/tip_images/tip9.png">
+</div>
+<button class="collapsible">Adding Self-Edges</button>
+<div class="content">
+<p>Certain types of edges can be added from an element to itself. To create a self-edge, select a valid edge type and drag the rubber band within a compatible node.</p>
+<img src="../tipdata/tip_images/tip10.png">
+</div>
+<button class="collapsible">Changing the Type of an Edge</button>
+<div class="content">
+<p>Certain types of edges can be changed through the edge's properties. Access the edge properties by double-clicking an edge or selecting it and typing Ctrl-Enter.</p>
+<img src="../tipdata/tip_images/tip11.png">
+</div>
+<button class="collapsible">Selecting Everything</button>
+<div class="content">
+<p>Use the menu command Edit | Select All (Ctrl-A) to select all elements in a diagram, for example to move the entire diagram as one.</p>
+<img src="../tipdata/tip_images/tip12.png">
+</div>
+<button class="collapsible">Creating Note Elements</button>
+<div class="content">
+<p>Use Note elements to annotate the diagram with complementary information.</p>
+<img src="../tipdata/tip_images/tip13.png">
+</div>
+<button class="collapsible">Linking Note Elements</button>
+<div class="content">
+<p>Use the note edge to link nodes to various parts of the diagram. Dragging a note edge from a target node to the note edge will link the note edge with the target node. Dragging a note edge from the note element will anchor the edge to a fixed point on the diagram.</p>
+<img src="../tipdata/tip_images/tip14.png">
+</div>
+<button class="collapsible">Tool Shortcuts</button>
+<div class="content">
+<p>The tools in the toolbar can be selected by pressing the "1" key for the first tool,"2" for the second, etc. The sequence 1-9,0,A,B... provides direct access to all the tools in the toolbar, from top to bottom.</p>
+<img src="../tipdata/tip_images/tip15.png">
+</div>
+<button class="collapsible">Edge Labels</button>
+<div class="content">
+<p>Certain types of edges can have associated labels. Edit the edge properties by double-clicking the edge or using the Ctrl-Enter shortcut.</p>
+<img src="../tipdata/tip_images/tip16.png">
+</div>
+<button class="collapsible">Cutting, Copying, and Pasting</button>
+<div class="content">
+<p>You can cut or copy one or more diagram elements and paste them either within the same diagram or into a different diagram. It is only possible to paste a selection to another diagram if all the elements in the selection are compatible with the destination diagram type.</p>
+<img src="../tipdata/tip_images/tip17.png">
+</div>
+<button class="collapsible">Verbose Tooltips</button>
+<div class="content">
+<p>Use the menu command View | Verbose Tooltips to toggle verbose tooltips in the toolbar. Verbose tooltips provide an extended description of the meaning of UML elements available in the toolbar.</p>
+<img src="../tipdata/tip_images/tip18.png">
+</div>
+<button class="collapsible">Adding Fields to Objects</button>
+<div class="content">
+<p>To add a field to an object, select the Field Creation tool from the toolbar and click within the desired object node. Accessing the fields' properties (Ctrl-Enter) allows to change the field's name and value.</p>
+<img src="../tipdata/tip_images/tip19.png">
+</div>
+<button class="collapsible">Adding Object References</button>
+<div class="content">
+<p>To add a reference to an object, select the Reference Creation tool from the toolbar, then drag a rubber band from the Value part of a field to the destination object node.</p>
+<img src="../tipdata/tip_images/tip20.png">
+</div>
+<button class="collapsible">Transitions in State Diagrams</button>
+<div class="content">
+<p>State diagrams support up to two transitions between nodes in either direction, as well as two self-transitions.</p>
+<img src="../tipdata/tip_images/tip21.png">
+</div>
+<button class="collapsible">Copying the Diagram to the Clipboard</button>
+<div class="content">
+<p>Use the Copy to Clipboard feature to copy a snapshot of the entire diagram to the system clipboard. The diagram can then be pasted easily into other applications. The feature is accessed using the File menu, the toolbar, or using the shortcut Ctrl-B.</p>
+<img src="../tipdata/tip_images/tip22.png">
+</div>
+<button class="collapsible">Creating Call Edges</button>
+<div class="content">
+<p>To create the initial call edge in a sequence diagram, select the Call Edge Creation tool and drag the rubber band from the life-line of the caller to the life-line of the callee.</p>
+<img src="../tipdata/tip_images/tip23a.png">
+<p>This will create the activation box for both the caller and the callee. To create additional call edges, drag from an activation box to a life-line.</p>
+<img src="../tipdata/tip_images/tip23b.png">
+</div>
+<button class="collapsible">Automatically Editing Newly Created Nodes</button>
+<div class="content">
+<p>To speed up diagramming, use the Auto Edit Node feature to automatically open the properties page whenever a new node is created. This feature is only available for nodes.</p>
+<img src="../tipdata/tip_images/tip24.png">
+</div>
+<button class="collapsible">Duplicating a Diagram</button>
+<div class="content">
+<p>Use the menu command File | Duplicate (Ctrl-D) to quickly make a duplicate of the current diagram. The duplicate diagram will be open in a new tab. This feature is especially useful when exploring different variants of a design.</p>
+<img src="../tipdata/tip_images/tip25.png">
+</div>
+<button class="collapsible">Sequence Diagram Validation</button>
+<div class="content">
+<p>JetUML verifies that call and return edges added to a sequence diagram result in a valid control sequence. Trying to add edges at arbitrary points that would result in a jump in the control flow will fail silently.</p>
+<img src="../tipdata/tip_images/tip26.png">
+</div>
+<button class="collapsible">Adding Self-Calls in Sequence Diagrams</button>
+<div class="content">
+<p>JetUML supports self-calls in sequence diagrams. To create a self-call, select the Call Edge Creation tool and drag the rubber band within an activation box.</p>
+<img src="../tipdata/tip_images/tip27.png">
+</div>
+<button class="collapsible">Adding Constructor Calls in Sequence Diagrams</button>
+<div class="content">
+<p>With JetUML you can represent constructor calls in sequence diagrams. To add a constructor call, select the Call Edge Creation tool and drag the rubber band from a source life-line or activation box to the implicit parameter node.</p>
+<img src="../tipdata/tip_images/tip28a.png">
+<p>The call will be shown with the label «create» and the implicit parameter will be positioned vertically aligned with the call. An activation box will be attached to the implicit parameter: use it to model calls that originate from the constructor.</p>
+<img src="../tipdata/tip_images/tip28b.png">
+</div>
+<button class="collapsible">Setting the Size of Diagrams</button>
+<div class="content">
+<p>In JetUML diagrams have a fixed size. To change this size, use the menu command View | Set Diagram Size. The size will be used when creating new diagrams or opening diagram files. When opening a diagram, the size is automatically increased to fit the diagram if necessary. Larger diagrams decrease the tool's performance. The default values are in relation to the display size.</p>
+<img src="../tipdata/tip_images/tip29.png">
+</div>
+<button class="collapsible">Adding Child Nodes to Packages</button>
+<div class="content">
+<p>Package nodes can contain child nodes. To add a child node to a package, select the desired Node Creation tool and click within a package to add this node directly as a child node. To add an existing node to a package, position the node on top of the package and hit the Shift key. To detach a node from a package, also hit the Shift key.</p>
+<img src="../tipdata/tip_images/tip30.png">
+</div>
+<button class="collapsible">Showing or Hiding the Grid</button>
+<div class="content">
+<p>It is possible to control whether the grid is visible or not in a diagram. Use the menu command View | Show Grid to toggle this option. Diagram elements automatically snap to the grid whether it is visible or not.</p>
+<img src="../tipdata/tip_images/tip31.png">
+</div>
+<button class="collapsible">Representing Incomplete Call Sequences</button>
+<div class="content">
+<p>Use the Open Bottom property of the activation box in a sequence diagram to represent an incomplete sequence of calls.</p>
+<img src="../tipdata/tip_images/tip32.png">
+</div>
+<button class="collapsible">Zooming the Diagram</button>
+<div class="content">
+<p>It is possible to zoom the diagram in and out up to a maximum of two levels in both directions. The commands are available through the View menu and through the shortcuts Ctrl-= (Zoom In), Ctrl-- (Zoom Out), and Ctrl-0 (Reset Zoom).</p>
+<img src="../tipdata/tip_images/tip33.png">
+</div>
+<button class="collapsible">Exporting the Diagram</button>
+<div class="content">
+<p>Use the menu command File | Export Image to save the current diagram as an image file. The image type is determined by the file extension selected from the Save as Type field.</p>
+<img src="../tipdata/tip_images/tip34.png">
+</div>
+</div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+<style>
+  .collapsible 
+  {
+    background-color: #DCDCDC;
+    color: black;
+    cursor: pointer;
+    padding: 10px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+  }
+.collapsible:hover 
+  {
+    background-color: #8e8e8e;
+  }
+.content 
+  {
+    padding: 0px 10px;
+    overflow: hidden;
+    background-color: #f1f1f1;
+    max-height: 0;
+    transition: max-height 0.2s ease-out;
+  }
+</style>
+
+<!-- Source: https://www.w3schools.com/ -->
+<script>
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  });
+}
 </script>
\ No newline at end of file