Created a screenshot, updated readme, converted popover arrow into text.

Author: kellyje

README.md

@@ -131,16 +131,11 @@ $(selector).optionsPopover([methods] or [config]);
 * [jQuery]
 
 ### Contact Us
-**Twitter:** [@_kellyje]
-**Email:** [email protected]
+* **Twitter:** [@_kellyje]
+* **Email:** [email protected]
 
 ## License
 Licensed under the MIT License.
 
   [jQuery]: http://jquery.com
-  [@_kellyje]: http://twitter.com/_kellyje
-  
-
-
-
-
+  [@kellyje_]: http://twitter.com/kellyje_

example/screenshot.png

@@ -479,7 +479,7 @@ Popover.prototype.createPopover = function () {
     popoverWrapperDiv.attr("id", "popoverWrapper");
 
     var s = "<div id='popover'>" +
-                "<div id='popoverArrow'></div>" +
+                "<div id='popoverArrow'>▲</div>" +
                 "<div id='currentPopoverAction' style='display: none;'></div>" +
                 "<div id='popoverContentWrapper'>" +
                     "<div id='popoverContent'></div>" +
@@ -682,7 +682,7 @@ Popover.prototype.insertHeader = function (){
     if(this.isBackEnabled){
         //console.log("LOG: Creating back button.");
         var thisPopover = this;
-        $("#popoverHeader").prepend("<a id='popoverBack'><span id='popoverBackIcon'>◂</span></a>");
+        $("#popoverHeader").prepend("<a id='popoverBack'><span id='popoverBackIcon'>◄</span></a>");
         $("#popoverBack").on("click", function () {
             thisPopover.previousPopover();
         });

popover.js

@@ -14,8 +14,8 @@
 @red: #d06268;
 
 @popoverHeaderHeight: 45px;
-@popoverCarrotHeight: 14px;
-@popoverCarrotWidth: 28px;
+@popoverCarrotHeight: 18px;
+@popoverCarrotWidth: 18px;
 
 @hoverOpacity: .5;
 
@@ -40,7 +40,7 @@ html{
  }
 
 #popoverWrapper {
-    font-family: verdana, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
     position: fixed;
     height: 100%;
     width: 305px;
@@ -64,7 +64,6 @@ html{
     visibility: visible !important;
     z-index: 10;
     -webkit-transform: translateZ(0);
-    border-top: 1px solid @darkGrey;
 
     a {
         color: @charcoal;
@@ -87,6 +86,8 @@ html{
     border-left: 1px solid @darkGrey;
     height: 49px;
     pointer-events: auto;
+    border-top: 1px solid @darkGrey;
+    .roundedCornersTop;
 }
 
 #popoverArrow {
@@ -98,10 +99,14 @@ html{
     left: 50%;
     z-index: 2;
 
-    height: @popoverCarrotHeight;
+    height: @popoverCarrotHeight - 4;
     width: @popoverCarrotWidth;
 
-    background: url('popupSprite1.png') no-repeat 0px 0px;
+    font-size: 18px;
+    color: #fff;
+    -webkit-transform: scale(2, 1);
+    text-shadow: 0 -2px #ccc;
+    //background: url('popupSprite1.png') no-repeat 0px 0px;
 }
 
 .flipArrow{
@@ -117,40 +122,28 @@ html{
     }
 }
 
-#popoverClose{
+#popoverClose, #popoverBack{
     position: absolute;
     cursor: pointer;
-    top: 0;
-    right: 0;
+    height: 49px;
     line-height: 49px;
 }
 
-#popoverCloseIcon{
-    color: #555;
+#popoverCloseIcon, #popoverBackIcon{
     display: inline-block;
-    //height: 22px;
-    //width: 21px;
+    color: #555;
     margin: -2px 10px;
-    font-size: 26px;
+    font-size: 22px;
     font-weight: 800;
-    //background: url('popupSprite1.png') no-repeat -5px -89px;
 }
 
-#popoverBack {
-    position: absolute;
-    cursor: pointer;
-    line-height: 49px;
+#popoverClose {
+    top: 0;
+    right: 0;
 }
 
 #popoverBackIcon {
-    color: #555;
-    display: inline-block;
-    //height: 22px;
-    //width: 22px;
-    //margin: 13px;
-    margin: -7px 10px;
-    font-size: 50px;
-    //background: url('popupSprite1.png') no-repeat -9px -116px;
+    -webkit-transform: scale(.75,1);
 }
 
 #popoverBackIcon:hover, #popoverCloseIcon:hover{
@@ -177,7 +170,36 @@ html{
     .borderBox;
 }
 
+.roundedCornersTop{
+    -webkit-border-top-left-radius: 5px;
+    -moz-border-top-left-radius: 5px;
+    -ms-border-top-left-radius: 5px;
+    -o-border-top-left-radius: 5px;
+    border-top-left-radius: 5px;
+
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-top-right-radius: 5px;
+    -ms-border-top-right-radius: 5px;
+    -o-border-top-right-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.roundedCornersBot{
+    -webkit-border-bottom-left-radius: 5px;
+    -moz-border-bottom-left-radius: 5px;
+    -ms-border-bottom-left-radius: 5px;
+    -o-border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-bottom-right-radius: 5px;
+    -ms-border-bottom-right-radius: 5px;
+    -o-border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
 #popoverContent {
+    border-top: 1px solid @darkGrey;
     visibility: visible;
     position: relative;
     overflow: auto;
@@ -187,9 +209,12 @@ html{
     text-align: left;
     font-size: 1em;
     background: @white;
+    box-shadow: 0px 12px 15px -6px #888;
     border-right: 1px solid @darkGrey;
     border-left: 1px solid @darkGrey;
     border-bottom: 1px solid @darkGrey;
+    .roundedCornersBot;
+    .roundedCornersTop;
     .borderBox;
     .last {
         border-bottom: none;

popover.less

@@ -33,18 +33,18 @@
             background: #fff;
         }
 
-        #popover{
-            font-size: .925em;
+        #popoverHeader{
+            font-size: 1em !important;
+        }
+
+        #popoverContent{
+            font-size: .875em !important;
         }
 
         p{
             padding: 0;
             margin: 0;
         }
-
-        #popoverContent{
-            text-align: center !important;
-        }
     </style>
 </head>
 <body>

test/test.html

@@ -19,10 +19,19 @@ var removeButton = function(id){
 addButton();
 var button1 = addButton();
 
-var popover = $("#"+button1.id).popover({
+var popover = $("#"+button1.id).optionsPopover({
     id: "button1",
-    title: "Popup Demo",
-    contents: "<p>testing</p>",
+    title: "Popover Demo",
+    contents: [
+        {
+            name: "Github",
+            id: "github"
+        },
+        {
+            name: "Logout",
+            id: "logout"
+        }
+    ],
     disableHeader: true,
     disableBackButton: false
 });