使用jQuery ui位置的jQuery（非插件）工具提示 - 如何改进？

我需要帮助查看使用jQuery ui位置的基本工具提示。 jQuery工具提示从链接获取标题属性，并在该链接的悬停上创建工具提示。这个代码如何改进或提高效率？我希望在这里发布这个希望能够帮助他人。我肯定花了足够的时间在我认为会很简单的事情上。使用jQuery ui位置的jQuery（非插件）工具提示 - 如何改进？

这里是我的代码（供人们很想张贴替代版本）：

http://jsfiddle.net/pN4Bw/

$(".tip a").hover(
    function() { 
    var tipText = $(this).attr("title"); 
    $("<div class='toolTip' style='display:none;'>" + tipText + " </div>").insertAfter(this); 
$('.toolTip').position({ 
    my: "left top", 
    at: "right top", 
    of: this, 
    collision: "flip" 
}); 
//Is there a better way to select the tooltip? 
$(this).next().fadeIn(500); //should I fade it in this way?    
}, function() { 
//Should I use a better selector? 
$(this).next().fadeOut('slow', function() { 
    $(this).remove(); 
    }); 
});

应我甚至可以用UI位置或其他技术？我愿意提供更好的解决方案。
你知道更好的非插件jQuery工具提示吗？
我拒绝为这样的东西使用插件。
我心脏的StackOverflow
jQuery UI的.POSITION使用上面 - http://jqueryui.com/demos/position/

的观念，思想，意见？谢谢大家，我希望这也能帮助其他人！

来源

2012-03-08 chainwork

使用jQueryUI position（）方法将取决于您是否已在页面中使用jQueryUI。如果你所需要的只是位置，将会是一种浪费。

使用offet（）方法使用链接偏移量和使用width（）方法调整宽度来计算位置的功能并不多。

如果已经加载jQueryUI的位置......（）是一个非常方便实用的方法，节省做Calcs（计算）自己

编辑：使用的UI位置“翻转”选项，但是确实需要相当多的精力来编写自己

来源

2012-03-08 19:05:06 charlietfl

非常感谢charlietfl，好点。如果你有时间用offset来提供一个例子，那就太棒了！ – chainwork 2012-03-08 19:17:05

查看API http://api.jquery.com/category/offset/中的示例如果您需要，UI位置的“翻转”部分确实需要一些额外的考虑。需要更多cals的窗口尺寸等来自己动手 – charlietfl 2012-03-08 19:18:40

感谢您的意见和见解charlietfl – chainwork 2012-03-22 19:04:38

使用jQuery ui位置的jQuery（非插件）工具提示 - 如何改进？

回答

相关问题