Added 'position' option to help reposition popover.

README.md

@@ -88,6 +88,17 @@ You can set some text to show on the picker field. For example, you could show a
     $('#color4').colorPicker();
   ```
 
+**Position of popover**
+
+You can set the position of the popover relative to the selector.  Options are: 'top', 'left', 'right', 'bottom'.  Default is 'bottom'.
+
+When 'top' position is used, the hex input field will appear above the color palettes.
+
+  ```javascript
+    $('#color1').colorPicker({position: 'top'});
+  ```
+
+
 ### Demo
 
 Demo can be found at http://laktek.github.com/really-simple-color-picker/demo.html

demo.html

@@ -24,6 +24,10 @@
     $('#color4').colorPicker();
 
     $('#color5').colorPicker({showHexField: false});
+
+    $('#color6').colorPicker({position: 'right'});
+
+    $('#color7').colorPicker({position: 'top'});
 
    //fires an event when the color is changed
    //$('#color1').change(function(){
@@ -82,6 +86,8 @@ <h2>Really Simple Color Picker (jQuery)</h2>
 			<div class="controlset"><label for="color3">Color 3 (with custom colors)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
       <div class="controlset"><label for="color4">Color 4 (with text in box)</label> <input id="color4" type="text" name="color4" value="#FF0000" data-text="AG" /></div>
       <div class="controlset"><label for="color5">Color 5 (without hex field)</label> <input id="color5" type="text" name="color5" value="#FF00FF" /></div>
+      <div class="controlset"><label for="color6">Color 6 (opens right)</label> <input id="color6" type="text" name="color6" value="#009900" /></div>
+      <div class="controlset"><label for="color7">Color 7 (opens above)</label> <input id="color7" type="text" name="color7" value="#9966CC" /></div>
 
 		</fieldset>
 

jquery.colorPicker.js

@@ -101,8 +101,13 @@
               $.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
             });
 
-            $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
+            if (opts.position === 'top') {
+                $('<div class="colorPicker_hexWrap" />').append(newHexLabel).prependTo(newPalette);
+            } else {
+                $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
+            }
 
+            newPalette.data('position', opts.position);
             newPalette.find('.colorPicker_hexWrap').append(newHexField);
             if (opts.showHexField === false) {
                 newHexField.hide();
@@ -229,10 +234,27 @@
         **/
         showPalette : function (palette) {
             var hexColor = selectorOwner.prev("input").val();
+            var position = palette.data('position');
+
+            var topOffset, leftOffset;
+            if (position === 'top') {
+                topOffset = selectorOwner.offset().top - palette.outerHeight();
+                leftOffset = selectorOwner.offset().left;
+            } else if (position === 'left') {
+                topOffset = selectorOwner.offset().top;
+                leftOffset = selectorOwner.offset().left - palette.outerWidth();
+            } else if (position === 'right') {
+                topOffset = selectorOwner.offset().top;
+                leftOffset = selectorOwner.offset().left + selectorOwner.outerWidth();
+            } else {
+                // DEFAULT: 'bottom'
+                topOffset = selectorOwner.offset().top + selectorOwner.outerHeight();
+                leftOffset = selectorOwner.offset().left;
+            }
 
             palette.css({
-                top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
-                left: selectorOwner.offset().left
+                top: topOffset,
+                left: leftOffset
             });
 
             $("#color_value").val(hexColor);
@@ -346,7 +368,9 @@
         addColors : [],
 
         // Show hex field
-        showHexField: true
+        showHexField: true,
+        // Position of palette relative to selector
+        position: 'bottom'
     };
 
 })(jQuery);