From 1094b1e3a662a0fed32ea80cf6b2119039903e24 Mon Sep 17 00:00:00 2001
From: Eike Foken <kontakt@eikefoken.de>
Date: Wed, 28 Sep 2011 16:35:25 +0200
Subject: [PATCH] Better jTips with CSS3

---
 assets/css/style.css | 88 +++++++++++++++++++++++---------------------
 assets/js/jtip.js    |  8 ++--
 2 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 983231c..4844caa 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -841,36 +841,62 @@ div.progress_bar strong {
 	padding: 4px 8px;
 }
 
-#jt_arrow_left {
-	background: url(../images/arrow-left.gif) left top no-repeat;
-	position: absolute;
-	z-index: 101;
-	left: -11px;
-	height: 23px;
-	width: 10px;
-	top: -3px;
-}
-
-#jt_arrow_right {
-	background: url(../images/arrow-right.gif) left top no-repeat;
-	position: absolute;
-	z-index: 101;
-	height: 23px;
-	width: 11px;
-	top: -2px;
-}
-
 #jt {
 	position: absolute;
 	z-index: 100;
 	border: 1px solid #ccc;
 	background-color: #fff;
-	margin-top: 5px;
 	font-size: 10px;
 }
 
+#jt.jt_left {
+	margin-right: 10px;
+}
+
+#jt.jt_right {
+	margin-left: 6px;
+}
+
+#jt:before {
+	content: "";
+	position: absolute;
+	top: 10px;
+	left: -16px;
+	border-width: 0 15px 15px 0;
+	border-style: solid;
+	border-color: transparent #ccc;
+	width: 0;
+	display: block;
+}
+
+#jt:after {
+	content: "";
+	position: absolute;
+	top: 11px;
+	left: -14px;
+	border-width: 0 14px 14px 0;
+	border-style: solid;
+	border-color: transparent #fff;
+	width: 0;
+	display: block;
+}
+
+#jt.jt_left:before {
+	left: auto;
+	right: -16px;
+	border-width: 15px 15px 0 0;
+	border-color: #ccc transparent;
+}
+
+#jt.jt_left:after {
+	left: auto;
+	right: -14px;
+	border-width: 14px 14px 0 0;
+	border-color: #fff transparent;
+}
+
 #jt_copy {
-	padding: 5px;
+	padding: 10px;
 	color: #666;
 }
 
@@ -880,26 +906,6 @@ div.progress_bar strong {
 	height: 12px;
 }
 
-#jt_close_left {
-	background-color: #ccc;
-	text-align: left;
-	padding-left: 4px;
-	padding-bottom: 2px;
-	padding-top: 1px;
-	font-weight: bold;
-	color: #000;
-}
-
-#jt_close_right {
-	background-color: #ccc;
-	text-align: left;
-	padding-left: 4px;
-	padding-bottom: 2px;
-	padding-top: 1px;
-	font-weight: bold;
-	color: #000;
-}
-
 #jt_copy p {
 	margin: 0;
 	line-height: 12px;
diff --git a/assets/js/jtip.js b/assets/js/jtip.js
index 1254e01..cfc2b8a 100644
--- a/assets/js/jtip.js
+++ b/assets/js/jtip.js
@@ -37,14 +37,14 @@ function JT_show(url, linkId, title) {
 	var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
 	var hasArea = w - getAbsoluteLeft(linkId);
 
-	var clickElementY = getAbsoluteTop(linkId) - 3; // set y position
+	var clickElementY = getAbsoluteTop(linkId) + 2; // set y position
 	var clickElementX = 0;
 
 	var queryString = url.replace(/^[^\?]+\??/,'');
 	var params = parseQuery(queryString);
 
 	if (params['width'] === undefined) {
-		params['width'] = 250;
+		params['width'] = 200;
 	}
 	if (params['link'] !== undefined) {
 		$('#' + linkId).bind('click', function() {
@@ -54,11 +54,11 @@ function JT_show(url, linkId, title) {
 	}
 
 	if (hasArea > (params['width'] * 1) + 75) {
-		$('body').append('<div id="jt" style="width: ' + params['width'] * 1 + 'px;"><div id="jt_arrow_left"></div><div id="jt_close_left">' + title + '</div><div id="jt_copy"><div class="jt_loader"><div></div></div>'); // right side
+		$('body').append('<div id="jt" class="jt_right" style="width: ' + params['width'] * 1 + 'px;"><div id="jt_copy"><div class="jt_loader"><div></div></div>'); // right side
 		var arrowOffset = getElementWidth(linkId) + 11;
 		clickElementX = getAbsoluteLeft(linkId) + arrowOffset; // set x position
 	} else {
-		$('body').append('<div id="jt" style="width: ' + params['width'] * 1 + 'px;"><div id="jt_arrow_right" style="left: ' + ((params['width'] * 1) + 1) + 'px;"></div><div id="jt_close_right">' + title + '</div><div id="jt_copy"><div class="jt_loader"><div></div></div>'); // left side
+		$('body').append('<div id="jt" class="jt_left" style="width: ' + params['width'] * 1 + 'px;"><div id="jt_copy"><div class="jt_loader"><div></div></div>'); // left side
 		clickElementX = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position
 	}