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

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

更新1：我非常清楚的文档和gravity选项，我期待居中提示箭头的左边缘的它的相应元素。

更新2：这里是了，我怎么想的工具提示中放置一个模拟： Left: Current, Right: Intended

来源

2012-05-30 Ryan Brodie

找到了解决方案，我在编辑错误的函数。它转的外面有专门为“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柜面等的需要此功能。

来源

2012-05-30 20:44:34

+1感谢您为可能有相同问题的其他人发布您的解决方案。 – lucuma

感谢您的回答，我最初对我沟通不畅表示歉意。 –

你应该能够基于重力选项来设置位置：

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

有关插件选项的信息可以在此页面找到。有关更多信息或其他配置选项，请参阅gravities一节。

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

来源

2012-05-30 18:37:04 lucuma

对不起有人发布了这个确切的答案，我评论解释了为什么它是错的，他们必须删除它。道歉，谢谢你的回答，我很了解这些文档，但是我将工具提示的提示与元素的**左边缘**对齐，而不是中心。 –

@RyanBrodie我很困惑，你可以发布你正在寻找的屏幕截图.. – lucuma

样机添加:) –

展望源（在第43行），

我发现这一点，

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

我猜改变left应该做的伎俩。

来源

2012-05-30 20:23:38 Jashwant

我认为这就是OP的要求是什么，应该设置。 – lucuma

'这个插件在显示时会自动设置工具提示的绝对位置，我试过改变这个功能，但没有运气。“是的，我正在寻找要修改的功能吗？ –

'如果你有源代码，东西如何自动设置'？顺便说一下，你有没有尝试过设置'left：0'？ – Jashwant

谢谢@Ryan的回答，这正是我一直在寻找的。我进一步了解了你的代码并提供了更多的功能。

我加了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-08 14:47:18 ghiscoding

很高兴看到您保持项目更新 –

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

回答

相关问题