Added example of flopping a comment bubble (and associated styles).

demo.html

@@ -76,8 +76,23 @@
 		width: 0;
 	}
 
-	#popover3 .after {
+	#popover5 .after,
+	#popover3.flopped-x .after {
 		border-bottom: 10px solid transparent;
+		border-left: 0;
+		border-right: 15px solid #333;
+		content: '';
+		bottom: -10px;
+		height: 0;
+		right: 10px;
+		position: absolute;
+		width: 0;
+	}
+
+	#popover3 .after,
+	#popover5.flopped-x .after {
+		border-bottom: 10px solid transparent;
+		border-right: 0;
 		border-left: 15px solid #333;
 		content: '';
 		bottom: -10px;
@@ -102,7 +117,7 @@
 
 	<!-- Include the libraries -->
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
-	<script src="jquery.ui.position.min.js"></script>
+	<script src="jquery.ui.position.js"></script>
  	<script src="jquery.cf.popover.js"></script>
 
 	<!-- Invoke the popovers -->
@@ -122,6 +137,12 @@
 				offset: '-5px -5px'
 			});
 
+			$('#trigger5').popover({
+				my: 'right bottom',
+				at: 'left top',
+				offset: '-5px -5px'
+			});
+
 			$('#trigger4').popover({
 				my: 'center top',
 				at: 'center bottom',
@@ -156,6 +177,13 @@ <h2>Upper right-hand corner</h2>
 			<div id="popover3" class="popover">I'm a Popover</div>
 		</div>
 
+		<div class="section">
+			<h2>Upper left-hand corner</h2>
+
+			<a id="trigger5" href="#popover5">Open Popover</a>
+			<div id="popover5" class="popover">I'm a Popover</div>
+		</div>
+
 		<div class="section">
 			<h2>Center/Bottom</h2>