Tooltip: Update custom-style demo, remove the ugly padding that was hiding layout issues, use new position feedback API instead of position callout in more then just one place

demos/tooltip/custom-style.html

@@ -13,39 +13,31 @@
 	<script>
 	$(function() {
 		$( ".demo" ).tooltip({
-			open: function(event, ui) {
-				$("<div>").addClass("arrow").appendTo(ui.tooltip);
-			},
 			position: {
-				my: "center bottom",
+				my: "center bottom-20",
 				at: "center top",
-				offset: "0 -20px"
+				using: function( position, feedback ) {
+					$( this ).css( position );
+					$( "<div>" )
+						.addClass( "arrow" )
+						.addClass( feedback.vertical )
+						.addClass( feedback.horizontal )
+						.appendTo( this );
+				}
 			}
 		});
 	});
 	</script>
 	<style>
-	label {
-		display: inline-block;
-		width: 5em;
-	}
-	.demo {
-		margin: 10em 0 0 10em;
-	}
 	.ui-tooltip, .arrow:after {
 		background: black;
 		border: 2px solid white;
 	}
 	.ui-tooltip {
-	  display: inline-block;
-	  position: relative;
 		padding: 10px 20px;
 		color: white;
 		border-radius: 20px;
-	  text-align: center;
 		font: bold 14px "Helvetica Neue", Sans-Serif;
-	  font-stretch: condensed;
-	  text-decoration: none;
 		text-transform: uppercase;
 		box-shadow: 0 0 7px black;
 	}
@@ -58,6 +50,13 @@
 		margin-left: -35px;
 		bottom: -16px;
 	}
+	.arrow.top {
+		top: -16px;
+		bottom: auto;
+	}
+	.arrow.left {
+		left: 20%;
+	}
 	.arrow:after {
 		content: "";
 		position: absolute;
@@ -65,24 +64,16 @@
 		top: -20px;
 		width: 25px;
 		height: 25px;
-	  -webkit-box-shadow: 6px 5px 9px -9px black,
-	              5px 6px 9px -9px black;
-	  -moz-box-shadow: 6px 5px 9px -9px black,
-	              5px 6px 9px -9px black;
-	  box-shadow: 6px 5px 9px -9px black,
-	              5px 6px 9px -9px black;
+		box-shadow: 6px 5px 9px -9px black;
 		-webkit-transform: rotate(45deg);
 		-moz-transform: rotate(45deg);
 		-ms-transform: rotate(45deg);
 		-o-transform: rotate(45deg);
+		tranform: rotate(45deg);
 	}
-	div[data-tooltip].active {
-	  opacity: 1;
-	  margin-top: 6px;
-	}
-	div[data-tooltip].out {
-	  opacity: 0;
-	  margin-top: -20px;
+	.arrow.top:after {
+		bottom: -20px;
+		top: auto;
 	}
 	</style>
 </head>