jquery ui-tooltip文档

jquery ui-tooltip api
jQuery UI Position jQuery UI Position api

自定义样式

using里添加

$(obj).tooltip({
	show: null,
	position: {
		my: "right-20 center",
		at: "left center",
		using: function( position, feedback ) {
			$( this ).css( position );
			$(this).addClass( "ui-tooltip_02" ); // 添加自定义class
			// 向tooltip里添加一个class为tooltip_arrow的div
			$( "<div>" )
                .addClass( "tooltip_arrow" )
                .addClass( feedback.vertical )
                .addClass( feedback.horizontal )
                .appendTo( this );
		}
	},
	content: function() {
		var swe=$(this).next().html();
		return swe;
	},
	hide: {
		effect: "slideDown",
		delay: 10
	}
})

自定义内容-content

$(obj).tooltip({
	show: null,
	position: {
		my: "right-20 center",
		at: "left center"
	},
	content: function() {
		var swe=$(this).next().html(); // 自定义的内容
		return swe;
	},
	hide: {
		effect: "slideDown",
		delay: 10
	}
})

tooltip闪烁

• 问题： tooltip正常显示在右侧时没问题，右侧空间小自动显示在左侧时一直闪烁
• 原因： 添加自定义class修改了ui-tooltip的宽度，导致插件计算left值错误，tooltip悬停在鼠标上方，遮住了元素，导致一直闪烁
• 解决方式： 在open事件里通过判断位置来手动修改ui-tooltip的left值

$(obj).tooltip({
	show: null,
	position: {
		my: "right-20 center",
		at: "left center",
		using: function( position, feedback ) {
			$( this ).css( position );
			$(this).addClass( "ui-tooltip_02" );
		}
	},
	open: function( event, ui ) {
		var dom_left = $(this).offset().left;
		var tooltip_left = $('.ui-tooltip_02').position().left;
		if (tooltip_left < dom_left) {
			if (tooltip_left - 140 > 0) {
				$('.ui-tooltip_02').css('left', (tooltip_left-140) +'px');
			} else {
				$('.ui-tooltip_02').css('left', (tooltip_left-110+490 + $(this).width()) +'px');
			}
		}
	},
	content: function() {
		var swe=$(this).next().html();
		return swe;
	},
	hide: {
		effect: "slideDown",
		delay: 10
	}
})

collision

类型： String
描述： 当被定位元素在某些方向上溢出窗口，则移动它到另一个位置。与 my 和 at 选项相似，该选项会接受一个单一的值或一对 horizontal/vertical 值。例如：“flip”、“fit”、“fit flip”、“fit none”。

• "flip"： 翻转元素到目标的相对一边，再次运行 collision 检测一遍查看元素是否适合。无论哪一边允许更多的元素可见，则使用那一边。
• "fit"： 把元素从窗口的边缘移开。
• "flipfit"： 首先应用 flip 逻辑，把元素放置在允许更多元素可见的那一边。然后应用 fit 逻辑，确保尽可能多的元素可见。
• "none"： 不应用任何 collision 检测。