Forum user: Aramaki

@@ -178,6 +178,8 @@
 			if (pos == 'center') { top += height / 2; }
 			if (pos == 'bottom') { top += height; }
 			
+//			alert(tip.y);
+			
 			// horizontal axis
 			var width = trigger.outerWidth() + tip.outerWidth();
 			var left = trigger.position().left + trigger.outerWidth();									
@@ -186,9 +188,11 @@
 			if (pos == 'center') { left -= width / 2; }
 			if (pos == 'left')   { left -= width; }	
 			
+//			alert(tip.x);
+			
 			// offset
 			top += conf.offset[0];
-			left += conf.offset[1];	
+			left = tip.x + conf.offset[1];	
 			
 			return {top: top, left: left};
 		}
@@ -246,7 +250,7 @@
 		
 		$.extend(self, {
 				
-			show: function(e) {
+			show: function(event, e) {
 				
 				if (e) { trigger = $(e.target); }				
 
@@ -254,6 +258,9 @@
 				
 				if (tip.is(":animated") || tip.is(":visible")) { return self; }
 				
+				if ( parseInt( event.pageX ) ) { tip.x = event.pageX }
+				if ( parseInt( event.pageY ) ) { tip.y = event.pageY }
+				
 				function show() {
 					
 					tip.data("trigger", trigger);
@@ -390,9 +397,9 @@
 		// assign tip's only when apiement is being mouseovered		
 		if (opts.lazy !== false && (opts.lazy === true || this.length > 20)) {	
 				
-			this.one("mouseover", function() {	
+			this.one("mouseover", function(event) {	
 				api = new Tooltip($(this), opts);
-				api.show();
+				api.show(event);
 			}); 
 			
 		} else {

	$(".examples .info img").tooltip({
		tip: '#tooltip',
		effect: 'toggle',
		lazy: false,
		fadeOutSpeed: 0,
		predelay: 400,
		delay: 100,
		offset: [-5, 0],
		onBeforeShow: function() {
			$("#tooltip").html(this.getTrigger().next().html());
		},
		position: "top center",
		api: true
	});

function InitTooltip(reload) {
	$(".examples .info img").tooltip({
		tip: '#tooltip',
		effect: 'toggle',
		lazy: false,
		fadeOutSpeed: 0,
		predelay: 400,
		delay: 100,
		offset: [-5, 0],
		onBeforeShow: function() {
			$("#tooltip").html(this.getTrigger().next().html());
		},
		position: "top center",
		api: true
	});
}

function InitTooltip(reload) {
	$(".examples .info img").live("mouseover", function() {
		$(this).tooltip({
			tip: '#tooltip',
			effect: 'toggle',
			lazy: false,
			fadeOutSpeed: 0,
			predelay: 400,
			delay: 100,
			offset: [-5, 0],
			onBeforeShow: function() {
				$("#tooltip").html(this.getTrigger().next().html());
			},
			position: "top center",
			api: true
		});
	});
}

	<div class="item">
		<div class="trigger">some text</div>
		<div class="content">some content some content some
 content some content some content </div>
	</div>
	<div class="item">
		<div class="trigger">another text</div>
		<div class="content">another content another content
 another content another content </div>
	</div>
	<div id="tooltip"> </div>

$(function() {
	if ($(".trigger").length) {
		$(".trigger").tooltip({
			tip: '#tooltip',
			lazy: false,
			onBeforeShow: function() {
				$("#tooltip").html()
			}
		}).dynamic({
			bottom: {
				direction: 'down',
				bounce: true
			}
		});
	}
}

   $("div.scrollable").scrollable({
		size : 1
   }); 

<div class="frame">
	<div class="scrollable">  
		<div class="items">
			<div class="item">
				<p>text</p>
			</div>
			<div class="item">
				<p>text</p>
			</div>
		</div>
	</div>
	<a class="prevPage browse left">left</a> 
	<a class="nextPage browse right">right</a>
</div>

<div class="frame">
	... 
	... 
	... 
	<span>
		<a class="prevPage browse left">left</a>
		<a class="nextPage browse right">right</a>
	</span>
</div>

.trigger {
}
.tooltip {
	background:transparent url(../img/ballon5.gif) no-repeat scroll 0 0;
	width:235px;
	height:128px;
	padding-bottom: 5px;
	display:none;
	z-index: 100;
	color: #666666;
	position: absolute;
	font-size: 13px;
}
.tooltip .close {
    float: right;
    margin: 10px 6px 0 0;
    cursor: pointer;
}
.tooltip p {
    margin: 0 15px 0 45px;
	font-size:13px;
}

<div class="tooltip">
	<img src="/Content/img/close2.gif" class="close" />
	<p>some text</p>
	<p>some text</p>
	<p>some text</p>
</div>

var api = $(".trigger").tooltip({
    tip: '.tooltip',
    effect: 'fade',
    fadeOutSpeed: 100,
    predelay: 400,
    delay: 100,
    position: "bottom right",
    offset: [-35, 10],
    api: true
});

$("img.close").click(function() {
    $(this).parents(".translation").find(".trigger").tooltip().hide();
});

<div id="someid" class="message">
<div>Some error happened.</div>
<div class="button"><button>Close</button></div>
</div>

$("a.close").click(function() {
    $(this).parents(".translation").find(".trigger").tooltip({ fadeOutSpeed: 10, delay: 0, api: true}).hide();
});