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 检测。
