added tooltips to webspace/traffic bars

Signed-off-by: Roman Schmerold (BNoiZe) <bnoize@froxlor.org>

templates/Sparkle/admin/admins/admins_admin.tpl

@@ -19,11 +19,11 @@
 				<span>Webspace:</span>
 				<if $row['diskspace'] != 'UL'>
 					<if (($row['diskspace']/100)*(int)Settings::Get('system.report_webmax')) < $row['diskspace_used']>
-						<div class="progress progress-danger">
+						<div class="progress progress-danger tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$disk_percent}%"></div>
 						</div>
 					<else>
-						<div class="progress">
+						<div class="progress tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$disk_percent}%"></div>
 						</div>
 					</if>
@@ -37,11 +37,11 @@
 				<span>Traffic:</span>
 				<if $row['traffic'] != 'UL'>
 					<if (($row['traffic']/100)*(int)Settings::Get('system.report_trafficmax')) < $row['traffic_used']>
-						<div class="progress progress-danger">
+						<div class="progress progress-danger tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$traffic_percent}%"></div>
 						</div>
 					<else>
-						<div class="progress">
+						<div class="progress tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$traffic_percent}%"></div>
 						</div>
 					</if>

templates/Sparkle/admin/customers/customers_customer.tpl

@@ -26,11 +26,11 @@
 				<span>Webspace:</span>
 				<if $row['diskspace'] != 'UL'>
 					<if (($row['diskspace']/100)*(int)Settings::Get('system.report_webmax')) < $row['diskspace_used']>
-						<div class="progress progress-danger">
+						<div class="progress progress-danger tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$disk_percent}%"></div>
 						</div>
 					<else>
-						<div class="progress">
+						<div class="progress tipper" title="{$row['diskspace_used']} {$lng['panel']['used']}, {$row['diskspace']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$disk_percent}%"></div>
 						</div>
 					</if>
@@ -44,11 +44,11 @@
 				<span>Traffic:</span>
 				<if $row['traffic'] != 'UL'>
 					<if (($row['traffic']/100)*(int)Settings::Get('system.report_trafficmax')) < $row['traffic_used']>
-						<div class="progress progress-danger">
+						<div class="progress progress-danger tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$traffic_percent}%"></div>
 						</div>
 					<else>
-						<div class="progress">
+						<div class="progress tipper" title="{$row['traffic_used']} {$lng['panel']['used']}, {$row['traffic']} {$lng['panel']['assigned']}">
 							<div class="bar" style="width: {$traffic_percent}%"></div>
 						</div>
 					</if>

templates/Sparkle/assets/css/main.css

@@ -1,13 +1,37 @@
 @charset "UTF-8";
 
 /* RESET */
-html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin:0; padding:0; }
+html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input {
-h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size:1em; font-weight:400; font-style:normal; }
+	margin:0;
-ul,ol { list-style:none; }
+	padding:0;
-fieldset,img { border:none; }
+}
-caption,th { text-align:left; }
+
-table { border-collapse:collapse; border-spacing:0; }
+h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {
-article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
+	font-size:1em;
+	font-weight:400;
+	font-style:normal;
+}
+
+ul,ol {
+	list-style:none;
+}
+
+fieldset,img {
+	border:none;
+}
+
+caption,th {
+	text-align:left;
+}
+
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+	display:block;
+}
 
 /* TYPE */
 html,body {
@@ -41,7 +65,7 @@ strong {
 	padding:30px;
 	background-color:#fff;
 	border-left:1px solid #b6c0cd;
-	margin-bottom: 0px;
+	margin-bottom:0;
 }
 
 .dark {
@@ -52,6 +76,7 @@ strong {
 header img {
 	padding:10px 0 10px 10px;
 }
+
 img.small {
 	height:30px;
 }
@@ -61,24 +86,24 @@ h1 {
 }
 
 h2,h3 {
-	margin: 0 0 10px 0;
+	margin:0 0 10px;
 	padding:0;
-	font-weight: bold;
+	font-weight:700;
 }
 
 h2 {
 	font-size:24px;
-	font-weight: normal;
+	font-weight:400;
 }
 
 h3 {
 	font-size:16px;
 }
+
 h4 {
 	font-size:1em;
 }
 
-
 img {
 	border:0;
 	vertical-align:middle;
@@ -90,22 +115,23 @@ td a {
 
 .bradius {
 	border-radius:3px;
-	box-shadow: rgba(0, 0, 0, 0.34902) 0px 1px 3px 0px;
+	box-shadow:rgba(0,0,0,0.34902) 0 1px 3px 0;
 }
 
 .topheader {
 	background:#f0f2f4;
 	background:rgba(240,242,244,0.85098);
-	top: 0px;
+	top:0;
 	width:100%;
 	padding:2px 0 0 5px;
 	box-shadow:0 1px 8px rgba(0,0,0,0.10);
 	position:fixed;
 	z-index:100;
-	border-bottom-color: rgb(221, 221, 221);
+	border-bottom-color:#ddd;
 	border-bottom-style:solid;
 	border-bottom-width:1px;
 }
+
 .topheader_navigation {
 	float:right;
 	margin:17px 50px 0 0;
@@ -116,52 +142,60 @@ ul.topheadernav {
 	list-style-type:none;
 	font-size:12px;
 }
+
 ul.topheadernav li {
-	padding: 0px;
+	padding:0;
 	margin-left:50px;
 	float:left;
 	position:relative;
 }
+
 ul.topheadernav li a {
 	display:block;
 	text-decoration:none;
 	color:#0f3e4e;
 }
+
 ul.topheadernav li a:hover {
 	color:#111;
 }
+
 ul.topheadernav li ul {
 	display:none;
 	background-color:#eee;
 	padding:5px;
 	box-shadow:0 1px 3px rgba(0,0,0,0.35);
-	margin-left: 0px;
+	margin-left:0;
 	border-radius:3px;
 }
+
 ul.topheadernav li:hover ul {
 	display:block;
 	position:absolute;
 }
+
 ul.topheadernav li ul li {
 	font-size:11px;
-	margin-left: 0px;
+	margin-left:0;
 }
+
 ul.topheadernav li ul li a:hover {
 	color:#111;
 }
 
 .topheadernav img {
-	padding: 0px;
+	padding:0;
-	margin: -4px 0 0 0;
+	margin:-4px 0 0;
 }
+
 .countbubble {
 	display:block;
 	font-size:9px;
 	color:#fff;
-	background-color: #dd0000;
+	background-color:#d00;
 	position:absolute;
 	padding:3px;
-	font-weight: bold;
+	font-weight:700;
 	line-height:9px;
 	border-radius:3px;
 	right:-6px;
@@ -175,12 +209,13 @@ footer {
 	color:#888;
 	font-size:10px!important;
 	padding:10px 0;
-	bottom: 0px;
+	bottom:0;
 }
 
 footer a,footer a:active,footer a:visited {
 	color:#888;
 }
+
 footer img {
 	margin:0 2px 3px 0;
 	height:13px;
@@ -194,6 +229,7 @@ footer img {
 	margin-bottom:12px;
 	width:500px;
 }
+
 .login div.warningcontainer,.login div.errorcontainer,.login div.successcontainer {
 	margin:10px!important;
 }
@@ -205,8 +241,9 @@ footer img {
 .fullform,.midform,.tinyform {
 	background-color:#fff;
 	border:1px solid #d1d5d8;
-	box-shadow: 0px 0px 0px black !important;
+	box-shadow:0 0 0 #000!important;
 }
+
 .fullform p {
 	margin:10px!important;
 }
@@ -224,14 +261,14 @@ table.tinyform input {
 .installsec table {
 	width:100%;
 	padding:0 10px;
-	margin: 15px 0 15px 0;
+	margin:15px 0;
 }
 
 .installsec h2 {
 	display:block;
 	border-bottom:1px solid #d1d5d8;
 	margin:0;
-	padding: 5px 15px 15px 15px;
+	padding:5px 15px 15px;
 }
 
 .tinyform,.loginsec,.errorsec {
@@ -239,9 +276,11 @@ table.tinyform input {
 	padding:10px 0;
 	text-align:center;
 }
+
 .errorsec {
-	padding: 10px 10px;
+	padding:10px;
 }
+
 .tinyform {
 	padding:0;
 }
@@ -258,6 +297,7 @@ table.tinyform input {
 	padding:10px 0;
 	text-align:left;
 }
+
 .midform {
 	padding:0;
 }
@@ -345,8 +385,9 @@ p.submit {
 	float:none;
 	width:auto;
 	text-align:left;
-	padding: 10px 10px 0 10px;
+	padding:10px 10px 0;
 }
+
 .installsec aside {
 	text-align:right;
 	padding:10px;
@@ -375,6 +416,7 @@ aside.right {
 	font-size:80%;
 	text-align:right;
 }
+
 .overviewsearch input[type="text"] {
 	width:150px;
 }
@@ -391,10 +433,10 @@ aside.right {
 	background:url(../img/icons/error_big.png) 10px center no-repeat #ffedef;
 	border:1px solid #ffc2ca;
 	padding:10px 10px 10px 68px!important;
-	margin: 10px 0 10px 0 !important;
+	margin:10px 0!important;
 	text-align:left!important;
 	overflow:hidden;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 }
 
 .errortitle {
@@ -407,7 +449,6 @@ aside.right {
 	color:#c00!important;
 }
 
-
 /*
  * warning message display
  */
@@ -415,11 +456,12 @@ aside.right {
 	background:url(../img/icons/warning_big.png) 10px center no-repeat #fffecc;
 	border:1px solid #f3c37e;
 	padding:10px 10px 10px 68px!important;
-	margin: 10px 0 10px 0 !important;
+	margin:10px 0!important;
 	text-align:left!important;
 	overflow:hidden;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 }
+
 .ui-dialog {
 	padding:10px!important;
 }
@@ -440,10 +482,10 @@ aside.right {
 	background:url(../img/icons/ok_big.png) 10px center no-repeat #E2F9E3;
 	border:1px solid #9C9;
 	padding:10px 10px 10px 68px!important;
-	margin: 10px 0 10px 0 !important;
+	margin:10px 0!important;
 	text-align:left!important;
 	overflow:hidden;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 }
 
 .successtitle {
@@ -462,10 +504,10 @@ aside.right {
 	background:url(../img/icons/info_big.png) 10px center no-repeat #d2eaf6;
 	border:1px solid #b7d8ed;
 	padding:10px 10px 10px 68px!important;
-	margin: 10px 0 10px 0 !important;
+	margin:10px 0!important;
 	text-align:left!important;
 	overflow:hidden;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 }
 
 .neutraltitle {
@@ -489,7 +531,7 @@ a:hover {
 }
 
 a.active {
-	font-weight: bold;
+	font-weight:700;
 }
 
 .infotext {
@@ -503,35 +545,41 @@ nav {
 	background-color:#f7f8fa;
 	min-height:500px;
 }
+
 nav div:first-child {
 	display:none;
 }
+
 nav div:nth-child(2) {
 	border-top:0!important;
 }
+
 .menuelement {
-	margin: 0 15px 0 15px;
+	margin:0 15px;
 	padding:15px 0 15px 5px;
 	border-bottom:1px solid #e1e7f0;
 	border-top:1px solid #fff;
 }
+
 nav div:last-child {
 	border-bottom:0!important;
 }
 
 .menuelement h4 {
 	background:transparent url(../img/icons/tag_blue.png) no-repeat center left;
-	font-weight: bold;
+	font-weight:700;
 	margin:0;
 	padding:0 0 0 20px;
 	color:#626976;
 }
+
 .menuelement h4 a {
 	color:#626976;
 }
+
 .menuelement ul {
 	list-style:none;
-	margin:3px 0 0px;
+	margin:3px 0 0;
 	padding:0;
 }
 
@@ -556,17 +604,18 @@ table {
 	border-spacing:0;
 	border:1px solid #d1d5d8;
 	border-collapse:separate;
-	box-shadow:0px 0px 0px black !important;
+	box-shadow:0 0 0 #000!important;
 }
 
 table thead th,table th {
 	border-top:1px solid #d1d5d8;
 	border-bottom:1px solid #d1d5d8;
 	height:25px!important;
-	padding: 5px 0px 5px 8px;
+	padding:5px 0 5px 8px;
 	background-color:#e9edf0;
-	font-weight: bold;
+	font-weight:700;
 }
+
 table thead:first-child th,table:first-child th {
 	border-top:none!important;
 }
@@ -574,16 +623,20 @@ table thead:first-child th, table:first-child th {
 table th {
 	border-top:0;
 }
+
 th a:hover {
 	text-decoration:none;
 }
+
 th a img {
 }
+
 th a:nth-child(odd) img {
 	position:relative;
 	top:-5px;
 	left:4px;
 }
+
 th a:nth-child(even) img {
 	position:relative;
 	top:3px;
@@ -601,6 +654,7 @@ table thead:first-child th {
 table tbody td {
 	border-bottom:1px solid #f1f2f3;
 }
+
 table tbody tr:last-child td {
 	border-bottom:0;
 }
@@ -610,7 +664,7 @@ table tbody tr:last-child td {
 	border-spacing:0;
 	border:0;
 	border-collapse:separate;
-	margin:0 0 0;
+	margin:0;
 }
 
 .formtable tbody td {
@@ -635,6 +689,7 @@ table tbody tr:last-child td {
 	padding-top:3px;
 	padding-bottom:3px;
 }
+
 .overviewcustomerextras span {
 	width:60px;
 	float:left;
@@ -653,8 +708,9 @@ table tfoot td {
 	border-top:1px solid #d1d5d8;
 	background-color:#f2f8fa;
 }
+
 .formtable tfoot td {
-	padding-right: 0px;
+	padding-right:0;
 }
 
 .tfootleft {
@@ -703,40 +759,49 @@ input[type="button"],input[type="submit"],input[type="reset"] {
 	min-width:80px;
 	height:28px;
 	background-image:none;
-	border-width: 0px;
+	border-width:0;
 }
+
 .loginsec input[type="button"],.loginsec input[type="submit"],.loginsec input[type="reset"] {
 	margin:0 1px;
 }
+
 input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover {
 	color:#333;
 	background-color:#dcdcdc;
 }
+
 input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active {
 	-webkit-box-shadow:inset 0 1px 8px rgba(0,0,0,0.25);
 	-moz-box-shadow:inset 0 1px 8px rgba(0,0,0,0.25);
 	box-shadow:inset 0 1px 8px rgba(0,0,0,0.25);
-    color: white !important;
+	color:#fff!important;
 }
+
 input[type="submit"],input[class="yesbutton"] {
-    color: white;
+	color:#fff;
 	background-color:#35aa47;
 }
+
 input[type="submit"]:hover,input[class="yesbutton"]:hover {
-	color: white;
+	color:#fff;
 	background-color:#1d943b;
 }
+
 input[class="submit"]:active,input[class="yesbutton"]:active {
 	background-color:#35aa47;
 }
+
 input[class="nobutton"],input[type="reset"] {
-    color: white;
+	color:#fff;
 	background-color:#d84a38;
 }
+
 input[class="nobutton"]:hover,input[type="reset"]:hover {
-	color: white;
+	color:#fff;
 	background-color:#c53727;
 }
+
 input[class="nobutton"]:active,input[type="reset"]:active {
 	background-color:#dd4b39;
 }
@@ -760,9 +825,11 @@ select {
 	-moz-appearance:none;
 	appearance:none;
 	min-width:170px;
-	text-indent: 0.01px;          /* Removes default arrow from firefox*/
+	text-indent:.01px;
-	text-overflow: "";
+/* Removes default arrow from firefox*/
+	text-overflow:;
 }
+
 select[multiple="multiple"] {
 	height:auto;
 	background-image:none;
@@ -781,7 +848,7 @@ select[multiple="multiple"] {
 	margin-bottom:15px;
 	margin-left:15px;
 	padding:0;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 	border:1px solid #d1d5d8;
 }
 
@@ -793,7 +860,7 @@ select[multiple="multiple"] {
 	margin-bottom:15px;
 	margin-left:15px;
 	padding:0;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 }
 
 .dboarditemfull {
@@ -803,7 +870,7 @@ select[multiple="multiple"] {
 	margin-top:10px;
 	margin-bottom:10px;
 	padding:0;
-	box-shadow: 0px 0px 0px black;
+	box-shadow:0 0 0 #000;
 	border:1px solid #d1d5d8;
 }
 
@@ -815,21 +882,21 @@ select[multiple="multiple"] {
 .dboarditem th,.dboarditemfull th {
 	border-bottom:1px solid #d1d5d8;
 	height:25px!important;
-	padding: 5px 0px 5px 8px;
+	padding:5px 0 5px 8px;
 	background-color:#e9edf0;
-	font-weight: bold;
+	font-weight:700;
 }
 
 .dboarditem td,.dboarditemfull td {
 	border-right:0;
 	border-bottom:1px solid #f1f2f3;
-	padding: 4px 0px 4px 8px;
+	padding:4px 0 4px 8px;
 }
 
 .cronjobtask li {
 	background-image:url(../img/icons/clock.png);
 	background-repeat:no-repeat;
-	background-position: 0px 1px; 
+	background-position:0 1px;
 	padding-left:18px;
 }
 
@@ -843,7 +910,6 @@ select[multiple="multiple"] {
 	display:inline;
 }
 
-
 /* PROGRESS BAR */
 .progress {
 	height:15px;
@@ -860,6 +926,7 @@ select[multiple="multiple"] {
 	text-align:center;
 	color:#999;
 }
+
 .progress .bar {
 	width:1px;
 	height:18px;
@@ -877,6 +944,7 @@ select[multiple="multiple"] {
 	-o-transition:width 6s ease;
 	transition:width 6s ease;
 }
+
 .progress-danger .bar {
 	background-color:#dd514c;
 }
@@ -922,7 +990,7 @@ label.nobr {
 .scrollup {
 	width:40px;
 	height:40px;
-    opacity:0.3;
+	opacity:.3;
 	position:fixed;
 	bottom:50px;
 	left:95px;
@@ -940,10 +1008,11 @@ label.nobr {
 	position:relative;
 	overflow:hidden;
 	width:100%;
-	margin-top:0px;
+	margin-top:0;
 	margin-bottom:10px;
 	padding:0 0 0 10px;
 }
+
 .canvasbox {
 	width:130px;
 	margin:10px 20px 10px 0;
@@ -952,6 +1021,7 @@ label.nobr {
 	height:150px;
 	line-height:normal;
 }
+
 .canvasbox canvas {
 	width:120px;
 	margin-bottom:5px;
@@ -960,7 +1030,7 @@ label.nobr {
 /* NEWSFEED */
 .newsitem {
 	border-bottom:1px solid #f1f2f3;
-	padding: 6px 5px 8px 5px;
+	padding:6px 5px 8px;
 	height:52px;
 	line-height:18px;
 	margin:0 5px;
@@ -968,20 +1038,107 @@ label.nobr {
 	text-overflow:ellipsis;
 	white-space:nowrap;
 }
+
 .newsitem a {
 	color:#333;
 	line-height:12px;
 }
+
 .newsitem a:hover {
 	text-decoration:none;
 }
+
 .newsitem a:hover b {
 	text-decoration:underline;
 }
+
 .newsitem b {
 	margin-right:15px;
 }
+
 .newsitem small {
 	font-size:8px;
 	color:gray;
 }
+
+/* TIPPER */
+.tipper-positioner {
+	left:-99999px;
+	position:absolute;
+	pointer-events:none;
+	top:-99999px;
+}
+
+.tipper-positioner .tipper-wrapper {
+	position:relative;
+}
+
+.tipper-positioner .tipper-content {
+	background:rgba(0,0,0,0.85);
+	border-radius:3px;
+	color:#fff;
+	display:block;
+	font-family:sans-serif;
+	font-size:11px;
+	margin:0;
+	padding:4px 8px;
+	white-space:nowrap;
+}
+
+.tipper-positioner .tipper-caret {
+	background:url(../img/tipper.png) no-repeat;
+	display:block;
+	height:11px;
+	margin:0;
+	overflow:hidden;
+	position:absolute;
+	width:5px;
+}
+
+.tipper-positioner.right {
+	box-shadow:1px 0 3px rgba(0,0,0,0.25);
+}
+
+.tipper-positioner.right .tipper-caret {
+	background-position:left center;
+	left:-5px;
+	top:0;
+}
+
+.tipper-positioner.left {
+	box-shadow:-1px 0 3px rgba(0,0,0,0.25);
+}
+
+.tipper-positioner.left .tipper-caret {
+	background-position:right center;
+	right:-5px;
+	top:0;
+}
+
+.tipper-positioner.top .tipper-caret,.tipper-positioner.bottom .tipper-caret {
+	display:block;
+	float:none;
+	height:5px;
+	margin:0 auto;
+	width:11px;
+}
+
+.tipper-positioner.top {
+	box-shadow:0 -1px 3px rgba(0,0,0,0.25);
+}
+
+.tipper-positioner.top .tipper-caret {
+	background-position:center bottom;
+	bottom:-5px;
+	left:0;
+}
+
+.tipper-positioner.bottom {
+	box-shadow:0 1px 3px rgba(0,0,0,0.25);
+}
+
+.tipper-positioner.bottom .tipper-caret {
+	background-position:center top;
+	top:-5px;
+	left:0;
+}

templates/Sparkle/assets/js/main.js

@@ -34,6 +34,11 @@ $(document).ready(function() {
 		}
 	});	
 	
+	// Enable Newsfeeds
+	$(".tipper").tipper({
+		direction: "right"
+	});
+	
 	// Height of divs fix
 	var snheight = $('#sidenavigation').height();
 	var mainheight = $('#maincontent').height();

templates/Sparkle/assets/js/tipper.min.js

@@ -0,0 +1,10 @@
+/*
+ * Tipper Plugin [Formstone Library]
+ * @author Ben Plum
+ * @version 0.4.3
+ *
+ * Copyright © 2013 Ben Plum <mr@benplum.com>
+ * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
+ */
+
+if(jQuery)(function(c){function n(a){e.formatter=p;return c(this).on("mouseenter.tipper",q).data("tipper",c.extend({},e,a||{}))}function q(){var a=c(this),b=a.data("tipper"),d;d='<div class="tipper-wrapper"><div class="tipper-content">'+b.formatter.apply(c("body"),[a]);d+='</div><span class="tipper-caret"></span></div>';a.data("tipper-text",a.attr("title")).attr("title",null);var g=c('<div class="tipper-positioner '+b.direction+'" />');g.append(d).appendTo("body");d=g.find(".tipper-caret");var h=a.offset(), e=a.outerWidth(),j=a.outerHeight(),k=g.outerWidth(!0),l=g.outerHeight(!0),f={},m={};"right"==b.direction||"left"==b.direction?(f.top=h.top-(l-j)/2,m.top=(l-d.outerHeight(!0))/2,"right"==b.direction?f.left=h.left+e+b.margin:"left"==b.direction&&(f.left=h.left-k-b.margin)):(f.left=h.left-(k-e)/2,m.left=(k-d.outerWidth(!0))/2,"bottom"==b.direction?f.top=h.top+j+b.margin:"top"==b.direction&&(f.top=h.top-l-b.margin));g.css(f);d.css(m);a.one("mouseleave.tipper",{$tipper:g,$target:a},r)}function p(a){return a.attr("title")} function r(a){a=a.data;a.$target.attr("title",a.$target.data("tipper-text")).data("tipper-text",null);a.$tipper.remove()}var e={direction:"right",follow:!1,formatter:function(){},margin:15},j={defaults:function(a){e=c.extend(e,a||{});return c(this)},destroy:function(){c(".tipper-wrapper").remove();return c(this).off(".tipper").data("tipper",null)}};c.fn.tipper=function(a){return j[a]?j[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"===typeof a||!a?n.apply(this,arguments):this}})(jQuery);

templates/Sparkle/header.tpl

@@ -19,6 +19,7 @@
 	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
 	<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/traffic.js"></script>
 	</if>
+	<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/tipper.min.js"></script>
 	<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/jcanvas.min.js"></script>
 	<script language="javascript" type="text/javascript" src="templates/{$theme}/assets/js/circular.js"></script>
 	<if Settings::Get('panel.use_webfonts') == '1'>