我正在使用jQuery Tipsy Plugin在我的项目中创建工具提示。工具提示自动居中于元素,如插件页面演示中所示,但我希望它与元素的左侧对齐,有没有人知道这样做的方法?该插件在显示时自动设置工具提示的绝对位置,我尝试改变此功能但没有运气。
更新1 :我很清楚文档和gravity
选项,我希望将工具提示箭头置于其中左边缘的中心位置相应的元素。
更新2 :以下是我希望如何放置工具提示的模拟:
答案 0 :(得分:2)
找到解决方案,我正在编辑错误的功能。它还有另外一个专门针对'NW / SW'重力的功能,更新了JS:
if (gravity.length == 2) {
if (gravity.charAt(1) == 'w') {
tp.left = pos.left - 5;
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}
我要在Git上解决这个问题,因为其他人需要这个功能。
答案 1 :(得分:1)
您应该能够根据重力选项设置位置:
$('#foo').tipsy({gravity: 'e'}); // these are coordinates: // nw | n | ne | w | e | sw | s | se
可以在此页面上找到有关插件选项的信息。有关详细信息或其他配置选项,请参阅“gravities”一节。
答案 2 :(得分:1)
感谢@Ryan的回答,这正是我想要的。我进一步使用了您的代码并提供了更多功能。
我为tipsy添加了2个新选项,以便它执行以下操作:
sw
/ nw
,您可以使用edgeAlignWest: 'right'
或edgeAlignWest: 'center'
se
/ ne
,您可以使用edgeAlignEast: 'left'
或edgeAlignEast: 'center'
执行此操作的新代码是
// line 61, tipsy version 1.0.0a
if (gravity.length == 2) {
if (gravity.charAt(1) == 'e') {
tp.left = (this.options.edgeAlignEast == 'right') ? (pos.left + pos.width - actualWidth + 15) : (pos.left + pos.width / 2 - actualWidth + 15);
}else if (gravity.charAt(1) == 'w') {
tp.left = (this.options.edgeAlignWest == 'left') ? (pos.left - 5) : (pos.left + pos.width / 2 - 15);
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}
//...
// line 191, tipsy version 1.0.0a
$.fn.tipsy.defaults = {
edgeAlignEast: 'center', // <-- new option, default to 'center', you can also use 'right'
edgeAlignWest: 'center', // <-- new option, default to 'center', you can also use 'left'
className: null,
delayIn: 0,
delayOut: 0,
fade: false,
fallback: '',
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover'
};
答案 3 :(得分:0)
查看来源(第43行),
我找到了这个,
case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
我想改变left
应该可以解决问题。