将jQuery Tipsy与元素的左边缘对齐

时间:2012-05-30 17:10:43

标签: jquery tipsy

我正在使用jQuery Tipsy Plugin在我的项目中创建工具提示。工具提示自动居中于元素,如插件页面演示中所示,但我希望它与元素的左侧对齐,有没有人知道这样做的方法?该插件在显示时自动设置工具提示的绝对位置,我尝试改变此功能但没有运气。

更新1 :我很清楚文档和gravity选项,我希望将工具提示箭头置于其中左边缘的中心位置相应的元素。

更新2 :以下是我希望如何放置工具提示的模拟: Left: Current, Right: Intended

4 个答案:

答案 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”一节。

http://onehackoranother.com/projects/jquery/tipsy/#

答案 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应该可以解决问题。