We are using the javascript for tooltips as popups doing this we can parse the information into the html. If there is a better way to do this that will achieve the same please let us know.

As all we really need is popups that will allow mouseover and out that is easy to maintain that can be customize, we want to do this with ajax or some other popular language but don't know how.

As for the code this is what I got working.

<?php $text = $_GET['text'];
if (!$text) {die('No text selected');}
elseif($text=='this') {echo 'This Text goes here'; }
elseif($text=='that') {echo '1'; }
?>

Thank you and please advise

Ohh and we are currently using the jquery library for the popups. We dont know of any alternative sources that will work like jquery and achieve the same.

so the end result is an enhaced tooltip,
specific to the region/anchor/link that is clicked

this code sample creates a layer, that embeds in any page to provide tooltips without any external file calls that could be considered security risks

<style type='text/css'>
.bottom { position:fixed; top:20px; left:10px; width:45%; visibility:hidden; padding:10px; margin:10px; background:#ececec; border: 1px solid; }
</style>
<script type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
if (dom) {document.getElementById(layer).style.visibility='hidden';}
if (document.layers) {document.layers[layer].visibility='hide';} }
function showIt() {
if (dom) {document.getElementById(layer).style.visibility='visible';}
if (document.layers) {document.layers[layer].visibility='show';} }
function placeIt() {
if (dom && !document.all) {document.getElementById(layer).style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
if (document.layers) {document.layers[layer].top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1))}
if (document.all) {document.all[layer].style.top = document.body.scrollTop + (document.body.clientHeight - (document.body.clientHeight-y1));}
window.setTimeout("placeIt()", 10); }
window.onload=placeIt;
--></script>
<a title='click for tip about this item' id="tooltip1" href='#' onClick="showIt('layer1');">knife tooltip</a><span id='layer1' class='bottom'>thumbs go over knives <br>knives should not go over thumbs<br><button id="close1" onClick="hideIt('layer1');">Close</button></span>
<a title='click for tip about this item' id="tooltip2" href='#' onmouseover="showIt('layer2');">hammer tooltip</a><span id='layer2' class='bottom' >heads and hammers dont mix<br><button id="close1" onClick="hideIt('layer2');">Close</button></span>

the javascript checks for supported browser DOM and uses the appropriate script for each browser family, so should work on all browsers

the anchors representing the click me for tooltip, and the actual tooltips can be saparated they do not have to be together, the 'popups' will still appear in place and remain visible over the page when the page scrolls

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.