updated the tooltips

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -324,6 +324,8 @@ Metamaps.GlobalUI.Account = {
 
         Metamaps.Realtime.close();
         Metamaps.Filter.close();
+        $('.sidebarAccountIcon div').addClass('hide');
+
 
         if (!self.isOpen && !self.changing) {
             self.changing = true;
@@ -337,6 +339,7 @@ Metamaps.GlobalUI.Account = {
     close: function () {
         var self = Metamaps.GlobalUI.Account;
 
+        $('.sidebarAccountIcon div').removeClass('hide');
         if (!self.changing) {
             self.changing = true;
             $('.sidebarAccountBox #user_email').blur();

app/assets/javascripts/src/Metamaps.js

@@ -1822,6 +1822,7 @@ Metamaps.Realtime = {
 
         Metamaps.GlobalUI.Account.close();
         Metamaps.Filter.close();
+        $('.sidebarCollaborateIcon div').addClass('hide');
 
         if (!self.isOpen && !self.changing) {
             self.changing = true;
@@ -1833,7 +1834,7 @@ Metamaps.Realtime = {
     },
     close: function () {
         var self = Metamaps.Realtime;
-
+        $(".sidebarCollaborateIcon div").removeClass('hide');
         if (!self.changing) {
             self.changing = true;
             $('.sidebarCollaborateBox').fadeOut(200, function () {
@@ -3063,6 +3064,8 @@ Metamaps.Filter = {
 
         Metamaps.GlobalUI.Account.close();
         Metamaps.Realtime.close();
+        $('.sidebarFilterIcon div').addClass('hide');
+
 
         if (!self.isOpen && !self.changing) {
             self.changing = true;
@@ -3076,6 +3079,8 @@ Metamaps.Filter = {
     },
     close: function () {
         var self = Metamaps.Filter;
+        $('.sidebarFilterIcon div').removeClass('hide');
+
 
         if (!self.changing) {
             self.changing = true;
@@ -4121,6 +4126,7 @@ Metamaps.Map = {
 
         Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
         Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data;
+
     },
     leavePrivateMap: function(){
         var map = Metamaps.Active.Map;
@@ -4274,7 +4280,7 @@ Metamaps.Map.InfoBox = {
     },
     open: function () {
         var self = Metamaps.Map.InfoBox;
-
+        $('.mapInfoIcon div').addClass('hide');
         if (!self.isOpen && !self.changing) {
             self.changing = true;
             $('.mapInfoBox').fadeIn(200, function () {
@@ -4286,6 +4292,7 @@ Metamaps.Map.InfoBox = {
     close: function () {
         var self = Metamaps.Map.InfoBox;
 
+        $('.mapInfoIcon div').removeClass('hide');
         if (!self.changing) {
             self.changing = true;
             $('.mapInfoBox').fadeOut(200, function () {

app/assets/stylesheets/clean.css

@@ -763,17 +763,160 @@
     background-position: 0 0;
 	cursor:pointer;
 }
+
+.mapControls:hover, .infoAndHelp:hover {
+    z-index: 4;
+}
 .zoomExtents {
     margin-bottom:5px;
     border-radius: 2px;
     background-image: url(extents_sprite.png);
 }
+
 .zoomExtents:hover {
     background-position: -32px 0;
 }
+
+.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
+ .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .sidebarAccountIcon:hover .tooltipsUnder,
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
+    display: block;
+}
+
+.hide {
+    display: none !important; 
+}
+
+.tooltips {
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    right: 45px;
+    color: white;
+    border-radius: 2px;
+    font-family: din-regular;
+    line-height: 15px;
+    font-size: 12px;
+    padding: 3px 5px 2px;
+    white-space: nowrap;
+    margin-top: 5px;
+}
+
+.tooltipsUnder {
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    color: white;
+    border-radius: 2px;
+    font-family: din-regular;
+    line-height: 15px;
+    font-size: 12px;
+    padding: 3px 5px 2px;
+    white-space: nowrap;
+    margin-top: 36px;
+}
+
+.tooltipsAbove {
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    text-transform: none;
+    color: white;
+    border-radius: 2px;
+    font-family: din-regular;
+    line-height: 15px;
+    font-size: 12px;
+    padding: 3px 5px 2px;
+    white-space: nowrap;
+    margin-top: -23px;
+    font-style: normal;
+}
+
+.sidebarCollaborateIcon .tooltipsUnder {
+    margin-left: -3px;
+}
+
+.sidebarFilterIcon .tooltipsUnder {
+    margin-left: -4px;
+}
+
+.sidebarForkIcon .tooltipsUnder {
+    margin-left: -34px;
+}
+
+.sidebarForkIcon div:after{
+    left: 45%;
+}
+
+.addMap .tooltipsUnder {
+    margin-left: -36px;
+}
+
+.addMap div:after {
+    left: 45%;
+}
+
+.mapInfoIcon .tooltipsAbove {
+    left: -11px;
+}
+
+.openCheatsheet .tooltipsAbove {
+    left: 29px;
+}
+
+.sidebarAccountIcon .tooltipsUnder {
+    margin-left: -8px;
+    margin-top: 40px;
+}
+
+.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after {
+    content: '';
+    position: absolute;
+    top: 57%;
+    left: 100%;
+    margin-top: -6px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid #000000;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+
+.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarAccountIcon div:after {
+    left: 38%;
+}
+
+.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon div:after {
+    content: '';
+    position: absolute;
+    top: 128%;
+    margin-top: -30px;
+    width: 0;
+    height: 0;
+    border-bottom: 4px solid #000000;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+.mapInfoIcon div:after, .openCheatsheet div:after {
+   content: '';
+    position: absolute;
+    top: 77%;
+    left: 41%;
+    margin-top: 5px;
+    width: 0;
+    height: 0;
+    border-top: 4px solid #000000;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
 .zoomIn {
     background-image: url(zoom_sprite.png);
-    background-position: 0 0;
+    background-position: 0 /…0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
 }

app/views/layouts/_lowermapelements.html.erb

@@ -1,12 +1,12 @@
 <div class="mapControls mapElement">
-	<div class="zoomExtents mapControl"></div>
+	<div class="zoomExtents mapControl"><div class="tooltips">Center View</div></div>
-	<div class="zoomIn mapControl"></div>
+	<div class="zoomIn mapControl"><div class="tooltips">Zoom In</div></div>
-	<div class="zoomOut mapControl"></div>
+	<div class="zoomOut mapControl"><div class="tooltips">Zoom In</div></div>
 </div>
 
 <div class="infoAndHelp">
 	<%= render :partial => 'maps/mapinfobox' %>
-    <div class="mapInfoIcon infoElement mapElement"></div>
+    <div class="mapInfoIcon infoElement mapElement"><div class="tooltipsAbove">Map Info</div></div>
-    <div class="openCheatsheet openLightbox infoElement" data-open="cheatsheet"></div>
+    <div class="openCheatsheet openLightbox infoElement" data-open="cheatsheet"><div class="tooltipsAbove">Help</div></div>
     <div class="clearfloat"></div>
 </div>

app/views/layouts/_upperelements.html.erb

@@ -22,7 +22,7 @@
         <% if authenticated? %>
             <!-- Realtime -->
             <div class="sidebarCollaborate upperRightEl">
-                <div class="sidebarCollaborateIcon upperRightIcon blue"></div>
+                <div class="sidebarCollaborateIcon upperRightIcon blue"><div class="tooltipsUnder">Junto</div></div>
                 <div class="sidebarCollaborateBox upperRightBox">
                     <h3 class="realtimeBoxTitle">REALTIME</h3>
                     <span class="realtimeOnOff rtOff">OFF</span>
@@ -43,7 +43,7 @@
 
         <!-- filtering -->
         <div class="sidebarFilter upperRightEl">
-            <div class="sidebarFilterIcon upperRightIcon"></div>
+            <div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>
             <div class="sidebarFilterBox upperRightBox">
                 <%= render :partial => 'shared/filterBox' %>
             </div>
@@ -52,7 +52,7 @@
         <% if authenticated? %>
         <!-- fork map -->
         <div class="sidebarFork upperRightEl">
-            <div class="sidebarForkIcon upperRightIcon"></div>
+            <div class="sidebarForkIcon upperRightIcon"><div class="tooltipsUnder">Save to new map</div></div>
         </div> <!-- end sidebarFork -->
         <% end %>
 
@@ -61,14 +61,14 @@
 
     <% if authenticated? %>
     <!-- create new map -->
-    <div class="addMap openLightbox upperRightEl upperRightIcon" data-open="newmap">
+    <div class="addMap openLightbox upperRightEl upperRightIcon" data-open="newmap"><div class="tooltipsUnder">Create new map</div>
     </div><!-- end addMap -->
     <% end %>
 
     <!-- Account / Sign in -->
     <% if !(controller_name == "sessions" && action_name == "new") %>
     <div class="sidebarAccount upperRightEl">
-        <div class="sidebarAccountIcon">
+        <div class="sidebarAccountIcon"><div class="tooltipsUnder">Account</div>
             <% if user && user.image %>
               <%= image_tag user.image.url(:square), :size => "32x32" %>
             <% elsif !authenticated? %>