Question

It seems so hard to find a easy to use tooltip for Prototype library. The ones that are out there are so bloated.

What I am looking for is something as simple as this.

<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>

I have a CSS solution but the problem is once the tooltip is near edge of browser, it goes off the edge. I like it to be smart and not go off the edge of browser window.

Anyways? I was thinking of using Prototype to find the x-y coordinates of pop-up and move it. but how to do it?

This is what I am using for 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

There’s a good tooltip project for prototype called prototip2, have you checked this out? even if you dont end up using it it might be helpful to have a dig around in the code to get some ideas, or is this one of the bloated ones you referred to?

If it helps, this is a snippet of prototype js i put together that detects if an element is within the viewport or not which might get you started if you’re not happy with the other solution.

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;
}

you could use this something like:

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