tooltip na klik

Zdravo!
Rabim še mal pomoči poskušam že neki časa a mi ne uspe. kako naj naredim da bo ta tooltip na linku onclick in da lahko vanj pišem. Npr če mam opombo da lahko besedilo od tooltipa kopiram nekam. Tko kot mam sedaj je mouseover če dam Onclick ne dela.

(document.getElementById) ? dom = true : dom = false;

function hideIt(add) {
  if (dom) {document.getElementById('layer'+add).style.visibility='hidden';}
  if (document.layers) {document.layers["layer"+add].visibility='hide';}
 }
function showIt(add) {
 if (dom) {
  if (document.getElementById('layer'+add).style.visibility=='visible') { hideIt(add); }
  else {document.getElementById('layer'+add).style.visibility='visible'} }

 if (document.layers) {
  if (document.layers["layer"+add].visibility=='show') { hideIt(add); }
  else {document.layers["layer"+add].visibility='show'}  }
 }

<div id="layer1" style="position:absolute; top:2; left:80; height:40; width:410; visibility:hidden; background-color: #e0e0e0; border: 2pt double">
<table border="0" bgcolor="#e0e0e0" cellpadding="2" cellspacing="0">
 <tr><td align="center"><font face="verdana, arial, helvetica, sans-serif" size="2">
   You could have the tooltip like this with light grey as the<br /> background-color with your choice of font with border.
 </font></td></tr>
</table>
</div>

<div id="layer2" style="position:absolute; top:35; left:80; width:610; height:10; visibility:hidden">
<table border="0" bgcolor="#ffff60" cellpadding="2" cellspacing="0">
 <tr><td align="center"><font face="garamond, times, serif" size="2">
   You could have the tooltip like this with light yellow as the<br /> background-color with your choice of font without border.
 </font></td></tr>
</table>
</div>

<div id="layer3" style="position:absolute; top:70; left:80; width:410; height:10; visibility:hidden">
<table border="0" bgcolor="#ffc0c0" cellpadding="2" cellspacing="0">
 <tr><td align="center"><font face="arial, helvetica, sans-serif" size="2">
   You could also stuff a lot of material in the tooltip with images also<br /> if you please like this example where you will
   see any image you add below:<br /><img src="images/image.gif" alt="Image" border="0" width="100" height="41"><br />
   This would surely jazz up any tooltip!
 </font></td></tr>
</table>
</div>

<font size="2"><a href="#" onMouseOver="showIt(1)" onMouseOut="hideIt(1)"><b>Links 1</b></a></font><br /><br />

<font size="2"><a href="#" onMouseOver="showIt(2)" onMouseOut="hideIt(2)"><b>Links 2</b></a></font><br /><br />

<font size="2"><a href="#" onMouseOver="showIt(3)" onMouseOut="hideIt(3)"><b>Links 3</b></a></font><br />