Searching the web i found a lot of solutions and
ToolTip Plugins wie z.b.
Simpletip oder
really simple tooltop, but after i had a short look at some i decided that they are all more or less usefull.
The most usuable entry i found was a short entry at
Stackoverflow telling me anything i need to know.
My basic requirement was, Javascript code has to be Seperated from the design and the Webpage content.
So my php template looks like this
<? foreach($entrys as $entry):
?><div id=
"entrylink_<?=$entry->id?>">
<a href=
"<?=$entry->link?>" onMouseOver=
"showEntryPreview('<?=$entry->id?>')" onMouseOut=
"hideEntryPreview('<?=$entry->id?>')"><?=
$entry->
name?></a>
</div>
<div id=
"entryinfo_<?=$entry->id?>" class=
"entry_preview">
... some more information ....
</div>
<?enforeach;?>
So this was set cause whoever willing to change the content or layer of the tool-tip or preview div, however you like to call it, should be able to change it without touching the JS functionallity.
So what i need to added now was CSS definition to hide tool-tip layer.
.entry_preview{
position:absolute;
z-index:999;
left:-9999px;
background-color:#FF0000;
padding:5px;
border:1px solid #fff;
width:250px;
So anybody could change layout later.
Now everything is needed is not an
extra plugin or
collection of plugins it´s just a few lines of JS code using
jquery
function showUserInfo(entryId){
var divOverlay=$('#entrylink_'+entryId);
var divParent=$('#entryinfo_'+entryId);
var parentPosition=divParent.position();
var parentWidth=divParent.width();
var parentHeight=divParent.height();
divOverlay.css('left', parentPosition.left+parentWidth);
divOverlay.css('top', parentPosition.top+parentHeight);
divOverlay.css('visibility', 'visible');
}
function hideUserInfo(entryId){
$('#entryinfo_'+userId).css('visibility', 'hidden');
}
I always wonder wy people code so many plugins for just so simple things, keep anything more complicated. Okay maybe it´s easier reusable but through most of them will not be maintained in one year or maybe are already lying arround for month, it is easier to just do it yourself.
Even this solutions has some Advantages cause the Tooltip Div is already existing inside the site, Javascript doesnt need to pass through all links like for example
here. And also a crawler would be able to read the content of the Tooltip Divs easiely.
But however in some cases it makes sense to read the content of the Tooltip-Layers later for example if they requery more data, big pictures, calculations etc,
it might be an option to read them later by Ajax Request.