1

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

更新 1：我非常了解文档和gravity选项，我希望将工具提示箭头居中到其相应元素的左边缘。

更新 2：这是我希望如何放置工具提示的模型： 左：当前，右：预期

4

4 回答 4

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 上 fork 以防其他人需要此功能。

于 2012-05-30T20:44:34.537 回答
1

您应该能够根据重力选项设置位置：

$('#foo').tipsy({gravity: 'e'});  // these are coordinates: // nw | n | ne | w | e | sw | s | se

可以在此页面上找到有关插件选项的信息。有关更多信息或其他配置选项，请参见重力部分。

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

于 2012-05-30T18:37:04.753 回答
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'
};
于 2016-07-08T14:47:18.953 回答
0

查看源代码（第 43 行），

我发现这个，

case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};

我想改变left应该可以解决问题。

于 2012-05-30T20:23:38.430 回答