Added CSS only tool tip to key map

diff --git a/root/css/relationship.css b/root/css/relationship.css
index f2512a5..b7c6e8b 100644 (file)
--- a/root/css/relationship.css
+++ b/root/css/relationship.css
@@ -218,3 +218,19 @@ user-select: none;
        text-align: right;
        margin: 10px;
 }
+.key .key_tip_container {
+    visibility: hidden;
+    position:absolute; 
+    left:-150px; 
+    width:140px;
+}
+.key:hover .key_tip {
+    padding: 4px;
+    font-size: 60%;
+    position: relative;
+    top: -18px;
+    visibility: visible;
+    border: 1px solid #B2B26B;
+    background-color: #FFFFCC;
+    z-index: 51; /* Cf. #update_workspace_button */
+}

diff --git a/root/js/relationship-full.js b/root/js/relationship-full.js
index 814e58e..e4b1c9c 100644 (file)
--- a/root/js/relationship-full.js
+++ b/root/js/relationship-full.js
@@ -205,7 +205,9 @@ function add_relations( callback_fn ) {
        // TODO Make the descriptions (in typedef.description) available somewhere
        $.each( relationship_types, function(index, typedef) {   
                 var elid = 'list_rel_' + typedef.name;
-                $('#keymaplist').append( $('<li>').attr( 'id', elid ).css( "border-color", relation_manager.relation_colors[index] ).text(typedef.name) ); 
+                li_elm = $('<li class="key">').attr( 'id', elid ).css( "border-color", relation_manager.relation_colors[index] ).text(typedef.name);
+                li_elm.append( $('<div class="key_tip_container"><div class="key_tip">Some obligatory help txt would be going here.</div></div>') );
+                $('#keymaplist').append( li_elm ); 
        });
        // Now fetch the relationships themselves and add them to the graph
        var rel_types = $.map( relationship_types, function(t) { return t.name });