Refs #3184, added ability to specify custom tooltips for datatable labels &...

Refs #3184, added ability to specify custom tooltips for datatable labels & modified Referers>Websites table to show full referer url as the tooltip. Also tweaked tooltip CSS style.


git-svn-id: http://dev.piwik.org/svn/trunk@6546 59fd770c-687e-43c8-a1e3-f5a4ff64c105

core/ViewDataTable.php

@@ -311,6 +311,7 @@ abstract class Piwik_ViewDataTable
 		$this->viewProperties['relatedReports'] = array();
 		$this->viewProperties['title'] = 'unknown';
 		$this->viewProperties['self_url'] = $this->getBaseReportUrl($currentControllerName, $currentControllerAction);
+		$this->viewProperties['tooltip_metadata_name'] = false;
 		
 		$standardColumnNameToTranslation = array_merge(
 			Piwik_API_API::getInstance()->getDefaultMetrics(),
@@ -1250,6 +1251,14 @@ abstract class Piwik_ViewDataTable
 		$this->viewProperties['highlight_summary_row'] = $highlightSummaryRow;
 	}
 	
+	/**
+	 * Sets the name of the metadata to use for a custom tooltip.
+	 */
+	public function setTooltipMetadataName( $metadataName )
+	{
+		$this->viewProperties['tooltip_metadata_name'] = $metadataName;
+	}
+	
 	/**
 	 * Sets columns translations array.
 	 *

plugins/CoreHome/templates/datatable.js

@@ -939,7 +939,25 @@ dataTable.prototype =
 		truncationLimit += truncationOffset;
 		domElemToTruncate.truncate(truncationLimit);
 		
-		$('.truncated', domElemToTruncate).tooltip();
+		var tooltipElem = $('.truncated', domElemToTruncate),
+			customToolTipText = domElemToTruncate.attr('title');
+		
+		// if there's a title on the dom element, use this as the tooltip instead of
+		// the one set by the truncate plugin
+		if (customToolTipText)
+		{
+			// make sure browser doesn't add its own tooltip for the truncated element
+			if (tooltipElem[0])
+			{
+				tooltipElem.removeAttr('title');
+			}
+			
+			tooltipElem = domElemToTruncate;
+			tooltipElem.attr('title', customToolTipText);
+		}
+		
+		// use tooltip (tooltip text determined by the 'title' attribute)
+		tooltipElem.tooltip();
 	},
 
 	//Apply some miscelleaneous style to the DataTable

plugins/CoreHome/templates/datatable_cell.tpl

@@ -15,10 +15,10 @@
 {/if}
 {if $column=='label'}
 	{logoHtml metadata=$row.metadata alt=$row.columns.label}
-	<span class='label{if !empty($row.metadata.is_aggregate) && $row.metadata.is_aggregate } highlighted{/if}'>{* make sure there are no whitespaces inside the span
+	<span class='label{if !empty($row.metadata.is_aggregate) && $row.metadata.is_aggregate } highlighted{/if}' {if !empty($properties.tooltip_metadata_name)}title="{$row.metadata[$properties.tooltip_metadata_name]}"{/if}>{* make sure there are no whitespaces inside the span
 *}{/if}{*
 *}{if isset($row.columns[$column])}{$row.columns[$column]}{else}{$defaultWhenColumnValueNotDefined}{/if}{*
 *}{if $column=='label'}</span>{/if}
 {if !$row.idsubdatatable && $column=='label' && !empty($row.metadata.url)}
 	</a>
-{/if}
+{/if}
\ No newline at end of file

plugins/Referers/Controller.php

@@ -216,6 +216,7 @@ class Piwik_Referers_Controller extends Piwik_Controller
 		$view->disableExcludeLowPopulation();
 		$view->setColumnsToDisplay( array('label','nb_visits') );
 		$view->setColumnTranslation('label', Piwik_Translate('Referers_ColumnWebsitePage'));
+		$view->setTooltipMetadataName('url');
 		return $this->renderView($view, $fetch);
 	}
 	

themes/default/common.css

@@ -374,7 +374,8 @@ a {
 
 #tooltip h3 {
 	font-weight: normal;
-	font-size:1em;
+	font-size:.85em;
+	font-style: italic;
 	color:#162540;
 	margin:0;
 	padding:0;
@@ -382,8 +383,8 @@ a {
 #tooltip {
 	position: absolute;
 	z-index: 3000;
-	border: 1px solid #111;
-	padding:7px;
+	border: 1px solid #E4E2D7 /*#111*/;
+	padding:5px 7px 5px 7px;
 	background-color:#F5F7FF;
 	opacity:0.95;
 }