3 files changed, 53 insertions, 43 deletions
diff --git a/admin/template/goto/default-layout.css b/admin/template/goto/default-layout.css
index f9f30ec1e..401b0928f 100644
--- a/admin/template/goto/default-layout.css
+++ b/admin/template/goto/default-layout.css
@@ -205,38 +205,6 @@ top: 0;
 left: 60px; /*position where enlarged image should offset horizontally */
 }
 
-
-/* Tooltips*/
-.tooltip {
-	position: relative;
-}
-
-.tooltip SPAN {
-	display: none;
-}
-
-.tooltip:hover {
-	cursor: pointer;
-	z-index: 500;
-}
-
-.tooltip:hover SPAN {
-	display: inline;
-	position: absolute;
-	top: 30px;
-	left: -50px;
-	width: 400px;
-
-	font-size: 11px;
-	text-decoration: none;
-	text-align: justify;
-	background-color: #FFFFCC;
-	color: #444444;
-
-	padding: 10px;
-	border: 1px solid Black;
-}
-
 BODY {
   margin: 5px;
   padding: 0;
@@ -531,4 +499,25 @@ LEGEND.tagLetterLegend {
 TABLE.tagLetterContent {
   width:100%;
   font-size:80%;
-  border-collapse : collapse; }
+  border-collapse : collapse;
+}
+
+/* jQuery tooltips */
+.cluetip-default #cluetip-outer {
+  position: relative;
+  border: 1px solid #111111;
+  color: #dddddd;
+  background-color: #222222;
+  text-align: left;
+}
+.cluetip-default h3#cluetip-title {
+  margin: 0 0 5px;
+  padding: 8px;
+  color: #666666;
+  background-color: #d3d3d3;
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.cluetip-default #cluetip-inner {
+  padding: 10px;
+}
diff --git a/admin/template/goto/plugins_new.tpl b/admin/template/goto/plugins_new.tpl
index bfa9dde5c..33515f30c 100644
--- a/admin/template/goto/plugins_new.tpl
+++ b/admin/template/goto/plugins_new.tpl
@@ -1,3 +1,16 @@
+{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"}
+{known_script id="jquery.dimensions" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.dimensions.packed.js"}
+{known_script id="jquery.cluetip" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.cluetip.packed.js"}
+
+<script type="text/javascript">
+jQuery().ready(function(){ldelim}
+  jQuery('.cluetip').cluetip({ldelim}
+    width: 450,
+    splitTitle: '|'
+  });
+});
+</script>
+
 <div class="titrePage">
   <h2>{'Plugins'|@translate}</h2>
 </div>
@@ -21,10 +34,8 @@
 </thead>
 {foreach from=$plugins item=plugin name=plugins_loop}
   <tr class="{if $smarty.foreach.plugins_loop.index is odd}row1{else}row2{/if}">
-    <td><a href="{$plugin.EXT_URL}" onclick="window.open(this.href); return false;" class="tooltip">{$plugin.EXT_NAME}
-      <span>{$plugin.EXT_DESC}</span></a></td>
-    <td style="text-align:center;"><a href="{$plugin.VERSION_URL}" onclick="window.open(this.href); return false;" class="tooltip">{$plugin.VERSION}
-      <span>{$plugin.VER_DESC}</span></a></td>
+    <td><a href="{$plugin.EXT_URL}" onclick="window.open(this.href); return false;" class="cluetip" title="{$plugin.EXT_NAME}|{$plugin.EXT_DESC}">{$plugin.EXT_NAME}</a></td>
+    <td style="text-align:center;"><a href="{$plugin.VERSION_URL}" onclick="window.open(this.href); return false;" class="cluetip" title="{$plugin.EXT_NAME}|{$plugin.VER_DESC}">{$plugin.VERSION}</a></td>
     <td>{$plugin.DATE}</td>
     <td>{$plugin.AUTHOR}</td>
     <td style="text-align:center;"><a href="{$plugin.URL_INSTALL}" onclick="return confirm('{'plugins_confirm_install'|@translate|@escape:javascript}');">{'plugins_auto_install'|@translate}</a>
diff --git a/admin/template/goto/plugins_update.tpl b/admin/template/goto/plugins_update.tpl
index 77173f92e..4d9742651 100644
--- a/admin/template/goto/plugins_update.tpl
+++ b/admin/template/goto/plugins_update.tpl
@@ -1,3 +1,16 @@
+{known_script id="jquery" src=$ROOT_URL|@cat:"template-common/lib/jquery.packed.js"}
+{known_script id="jquery.dimensions" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.dimensions.packed.js"}
+{known_script id="jquery.cluetip" src=$ROOT_URL|@cat:"template-common/lib/plugins/jquery.cluetip.packed.js"}
+
+<script type="text/javascript">
+jQuery().ready(function(){ldelim}
+  jQuery('.cluetip').cluetip({ldelim}
+    width: 450,
+    splitTitle: '|'
+  });
+});
+</script>
+
 <div class="titrePage">
   <h2>{'Plugins'|@translate}</h2>
 </div>
@@ -16,11 +29,9 @@
 </thead>
 {foreach from=$plugins_not_uptodate item=plugin name=plugins_loop}
   <tr class="{if $smarty.foreach.plugins_loop.index is odd}row1{else}row2{/if}">
-    <td><a href="{$plugin.EXT_URL}" onclick="window.open(this.href); return false;" class="tooltip">{$plugin.EXT_NAME}
-        <span>{$plugin.EXT_DESC}</span></a></td>
+    <td><a href="{$plugin.EXT_URL}" onclick="window.open(this.href); return false;" class="cluetip" title="{$plugin.EXT_NAME}|{$plugin.EXT_DESC}">{$plugin.EXT_NAME}</a></td>
     <td style="text-align:center;">{$plugin.VERSION}</td>
-    <td style="text-align:center;"><a href="{$plugin.VERSION_URL}" onclick="window.open(this.href); return false;" class="tooltip">{$plugin.NEW_VERSION}
-        <span>{$plugin.NEW_VER_DESC}</span></a></td>
+    <td style="text-align:center;"><a href="{$plugin.VERSION_URL}" onclick="window.open(this.href); return false;" class="cluetip" title="{$plugin.EXT_NAME}|{$plugin.NEW_VER_DESC}">{$plugin.NEW_VERSION}</a></td>
     <td style="text-align:center;"><a href="{$plugin.URL_UPDATE}" onclick="return confirm('{'plugins_confirm_upgrade'|@translate|@escape:javascript}');">{'plugins_auto_update'|@translate}</a>
       / <a href="{$plugin.URL_DOWNLOAD}">{'plugins_download'|@translate}</a></td>
   </tr>
@@ -41,8 +52,7 @@
 </thead>
 {foreach from=$plugins_uptodate item=plugin name=plugins_loop}
   <tr class="{if $smarty.foreach.plugins_loop.index is odd}row1{else}row2{/if}">
-    <td><a href="{$plugin.URL}" onclick="window.open(this.href); return false;" class="tooltip">{$plugin.NAME}
-        <span>{$plugin.EXT_DESC}</span></a></td>
+    <td><a href="{$plugin.URL}" onclick="window.open(this.href); return false;" class="cluetip" title="{$plugin.NAME}|{$plugin.EXT_DESC}">{$plugin.NAME}</a></td>
     <td style="text-align:center;">{$plugin.VERSION}</td>
   </tr>
 {/foreach}