javascript - 使用 Prototype.js 的工具提示

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

有一个很好的原型(prototype)工具提示项目叫做 prototip2 ，你查过这个吗？即使您最终没有使用它，深入研究代码以获得一些想法也可能会有所帮助，或者这是您提到的臃肿代码之一？

如果有帮助，这是我放在一起的原型(prototype) js 片段，用于检测元素是否在视口(viewport)内，如果您对其他解决方案不满意，这可能会让您入门。

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
}