Index: /CKEditor/branches/prototype/_source/plugins/specialchar/dialogs/specialchar.js
===================================================================
--- /CKEditor/branches/prototype/_source/plugins/specialchar/dialogs/specialchar.js	(revision 2838)
+++ /CKEditor/branches/prototype/_source/plugins/specialchar/dialogs/specialchar.js	(revision 2839)
@@ -42,5 +42,5 @@
 					if (specialChars[i])
 					{
-						html.push('<td width="1%" value="' + specialChars[i].replace(/&/g, "&amp;") + '" class="DarkBackground SpecialCharsOut Hand">');
+						html.push('<td width="1%" title=' + specialChars[i].replace(/&/g, "&amp;") + ' value="' + specialChars[i].replace(/&/g, "&amp;") + '" class="DarkBackground SpecialCharsOut Hand">');
 						html.push(specialChars[i]);
 					}
@@ -54,5 +54,5 @@
 
 			html.push( '</tbody></table>' );
-			this.getContentElement( 'info', 'charContainer' ).getElement().setHtml(html.join( '' ));
+			this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );
 		},
 		contents : [
@@ -63,24 +63,55 @@
 				elements : [
 					{
-						type : 'html',
-						id : 'charContainer',
-						align : 'left',
-						html : '',
-						onClick : function( evt )
-						{
-							var target = evt.data.getTarget();
-							var targetName = target.getName();
+						type : 'hbox',
+						widths : [ '85%', '15%' ],
+						align : 'right',
+						children :
+						[
+							{
+								type : 'html',
+								id : 'charContainer',
+								html : '',
+								onMouseover : function( evt )
+								{
+									var dialog = this.getDialog();
+									var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
+									var target = evt.data.getTarget();
+									var targetName = target.getName();
 
-							if ( targetName == 'td' )
+									if ( targetName == 'td' )
+										if ( value = target.$.getAttribute( 'value' ) )
+											preview.setHtml( value );
+								},
+								onMouseout : function( evt )
+								{
+									var dialog = this.getDialog();
+									var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
+									preview.setHtml( '&nbsp;' );
+								},			
+								onClick : function( evt )
+								{
+									var target = evt.data.getTarget();
+									var targetName = target.getName();
+									var editor = this.getDialog().getParentEditor();
+									if ( targetName == 'td' )
+									{
+										target = target.$;
+										if ( value = target.getAttribute( 'value' ) )
+										{
+											this.getDialog().restoreSelection();
+											editor.insertElement( CKEDITOR.dom.element.createFromHtml( value ) );
+											this.getDialog().hide();
+										}
+									}
+								}
+							},
 							{
-								target = target.$;
-								if ( value = target.getAttribute( 'value' ) )
-								{
-									this.getDialog().restoreSelection();
-									editor.insertElement( CKEDITOR.dom.element.createFromHtml( value, editor.document ) );
-									this.getDialog().hide();
-								}
+								type : 'html',
+								id : 'charPreview',
+								style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;padding-top:8px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
+								align : 'center',
+								html : '<div>&nbsp;</div>',
 							}
-						}
+						]
 					}
 				]