Question

为Prototype库找到一个易于使用的工具提示似乎很难。那些在那里的人非常臃肿。

我正在寻找的东西就像这样简单。

<a class="tooltip">This is my sentence<span>Tooltip is here</span> that ends in sorrow.</a> <a class="tooltip">How can I make this happen <span>like how?</span> without killing people.</a>

我有一个CSS解决方案，但问题是一旦工具提示靠近浏览器的边缘，它就会脱离边缘。我喜欢它是聪明的，而不是走出浏览器窗口的边缘。

反正？我正在考虑使用Prototype来找到弹出窗口的x-y坐标并移动它。但怎么办呢？

这就是我用于CSS

的内容

.date_info a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
.date_info a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;}
.date_info a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #555; color:#6c6c6c;}

Answer 1

对于名为prototip2的原型有一个很好的工具提示项目，你有没有看过这个？即使你最终没有使用它，在代码中挖掘一些想法可能会有所帮助，或者这是你提到的那个臃肿的一个？

如果它有帮助，这是一个原型j的片段，我把它放在一起，检测一个元素是否在视口内，如果你对另一个解决方案不满意，可能会让你开始。

function withinViewport(el) {
    var elOffset = $(el).cumulativeOffset(el);
    vpOffset = document.viewport.getScrollOffsets();
    elDim = $(el).getDimensions();
    vpDim = document.viewport.getDimensions();
    if (elOffset[1] + elDim.height < vpOffset[1] || elOffset[1] > vpOffset[1] + vpDim.height ||
        elOffset[0] + elDim.width < vpOffset[0]  || elOffset[0] > vpOffset[0] + vpDim.width) {
        return false;
    }
    return true;
}

您可以使用以下内容：

if(!withinViewport($(el)){
  // move me - add padding / margin or something like that
}

Answer 2

您可以在链接下方将其作为原型工具提示的良好资源：

1] Prototip

2] Prototip2

3] Cooltips

这是我发现非常有趣和有帮助的三种资源。

Answer 3

CoolTips似乎正好在你的小巷里。

Answer 4

我还没检查过。我认为你可以使用Opentip这是一个工具提示框架。您可以为您的框架选择一个。它也适用于原型。如果您不打算支持IE8，则不必使用-excanvas文件。如果您不打算进行调试，那么您将成为'min.js'

的用户

使用Prototype.js的工具提示

4 个答案: