Clearer Tooltip

masks/project.html

@@ -476,8 +476,13 @@ function initSpotMessages(aoMessages, aoTracks) {
 		onEachFeature: function(feature, oLayer) {
 			var asProperties = feature.properties;
 			var $Tooltip = $('<div>', {'class':'track_tooltip'});
-			$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip);
-			if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
+			$('<p>', {'class':'name', 'title':asProperties.name}).addIcon('fa-track-'+asProperties.type+' fa-fw', true).append(asProperties.name).appendTo($Tooltip);
+
+			var $TooltipDetails = $('<div>', {'class':'details'});
+			if(asProperties.Name != asProperties.description && asProperties.description != '') {
+				$('<p>', {'class':'description', 'title':asProperties.description}).text(asProperties.description).appendTo($TooltipDetails);
+			}
+			$TooltipDetails.append($('<div>', {'class':'separator'}));
 
 			var aiCoords = feature.geometry.coordinates;
 			if(aiCoords && asProperties.type != 'hitchhiking') {
@@ -522,10 +527,12 @@ function initSpotMessages(aoMessages, aoTracks) {
 					+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes)														//Minutes
 
 				//Tooltip info
-				$('<p>', {'class':'detail'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($Tooltip);
-				$('<p>', {'class':'detail'}).addIcon('fa-time fa-fw', true).append(sDuration).appendTo($Tooltip);
-				$('<p>', {'class':'detail'}).addIcon('fa-elev-gain fa-fw', true).append(iElevGain+'m').appendTo($Tooltip);
-				$('<p>', {'class':'detail'}).addIcon('fa-elev-drop fa-fw', true).append(iElevDrop+'m').appendTo($Tooltip);
+				$('<p>', {'class':'detail'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($TooltipDetails);
+				$('<p>', {'class':'detail'}).addIcon('fa-time fa-fw', true).append(sDuration).appendTo($TooltipDetails);
+				$('<p>', {'class':'detail'}).addIcon('fa-elev-gain fa-fw', true).append(iElevGain+'m').appendTo($TooltipDetails);
+				$('<p>', {'class':'detail'}).addIcon('fa-elev-drop fa-fw', true).append(iElevDrop+'m').appendTo($TooltipDetails);
+
+				$TooltipDetails.appendTo($Tooltip);
 
 				//Trail Start/End
 				self.tmp(['trail-markers', asProperties.name], {

style/_mask_project.scss

@@ -118,10 +118,27 @@ $legend-color: $post-color;
 					font-weight: bold;
 					font-size: 1.2em;
 				}
-				&.description {
+			}
+
+			.name, .description {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+			}
+
+			.separator {
+				border-top: 1px solid #CCC;
+				margin-top: 1em;
+			}
+
+			.details {
+				padding-left: calc(1.25em*1.2 + 0.5rem);
+
+				.description {
 					font-style: italic;
 				}
-				&.detail {
+
+				.detail {
 					margin-top: 1em;
 					width: 50%;
 					display: inline-block;