Tooltip using Prototype.js
It seems so hard to find an easy-to-use hint for the Prototype library. Those over there are so bloated.
What I am looking for is something simple.
<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 the tooltip is near the edge of the browser, it goes off the edge. I like to be smart and not go off the edge of the browser window.
Anyway? I thought to use Prototype to find the xy coordinates of the popup and move it. but how to do that?
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;}
source to share
There's a nice project tip for a prototype called prototip2 , have you checked that out? even if you don't finish using it, it might be helpful to have some digging in the code to get some ideas, or is this one of the hyped ones you mentioned?
If that helps, this is the js i prototype snippet that pulls together that determines if an element is in the viewport or not, which can get you started if you're not satisfied with another 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 can use it like:
if(!withinViewport($(el)){
// move me - add padding / margin or something like that
}
source to share
I haven't tested it yet. I think you can use Opentip which is a tooltip environment. You can choose one for your structure. This is also for the prototype. If you're not going to support IE8, you don't need to use the -excanvas file. If you are not going to debug, you will be a happy user with "min.js"
source to share