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