This website mostly serves to present my work as an webdesigner. In my portfolio you will find an overview of my recent projects.

Anleitung zum löschen des Cache: cachemeifyoucan.com

markuslang.com

bigr-solutions.net

musikwerker.de

projekt-misside-guinea.de

feedyourfeeds.com

 

 

Tooltip with JavaScript

Mit dem folgenden kleinen Skript lassen sich unterschiedliche Tooltips mittels JavaScript realisieren.

Die JavaScript-Funktionen zur Erzeugung der Tooltips werden über eine ausgelagerte JavaScript-Datei eingebunden.

  1. // tt = tooltip
  2. // global variables
  3. var intOffset_X_Pointer = 20;
  4. var intOffset_Y_Pointer = 20;
  5.  
  6. // elements for tooltip
  7. var aryToolTipElements = Array('a','span');
  8.  
  9. // browser?
  10. var blnIE = document.all;
  11. var blnNS = document.getElementById && !document.all;
  12.  
  13. // tt-container
  14. document.write('<div id="my_tt"></div><br />');
  15.  
  16. var show_tt = false;
  17. var obj_tt = document.getElementById("my_tt");
  18.  
  19. // get tt-elements
  20. function generateToolTips() {
  21.   for (var x = 0; x != aryToolTipElements.length; x++) {
  22.     var objElement = document.getElementsByTagName(aryToolTipElements[x]);
  23.     if (objElement) {
  24.       for (var y = 0; y != objElement.length; y++) {
  25.         if (objElement[y].className == "tt") {
  26.           objElement[y].setAttribute("tt_content", objElement[y].title);
  27.           objElement[y].removeAttribute("title");
  28.           objElement[y].onmouseover = function() {
  29.             enable_tt(this.getAttribute("tt_content"),true);
  30.           };
  31.           objElement[y].onmouseout = function() { hide_tt(false); };
  32.         }
  33.       }
  34.     }
  35.   }
  36. }
  37.  
  38. function enable_tt(tt_content, blnShow_tt) {
  39.   show_tt = blnShow_tt;
  40.   obj_tt.innerHTML = tt_content;
  41. }
  42.  
  43. function hide_tt(blnShow_tt) {
  44.   show_tt = blnShow_tt;
  45.   obj_tt.style.width = '';
  46.   obj_tt.style.left = "-5000px";
  47.   obj_tt.style.visibility = "hidden";
  48. }
  49.  
  50. function tt_position(objThis) {
  51.   if (show_tt) {
  52.     // get ViewPortheight
  53.     var intcH = document.documentElement.clientHeight;
  54.     // differentiated values for IE and NS
  55.     if (blnIE) {
  56.       intcX = event.clientX; intcY = event.clientY + document.documentElement.scrollTop;
  57.       intsLeft = document.documentElement.scrollLeft;
  58.       var intBottom = intcH - event.clientY - 20;
  59.     } else {
  60.       intcX = objThis.clientX; intcY = objThis.pageY;
  61.       var intBottom = intcH - objThis.clientY - 20;
  62.       intsLeft = 0;
  63.     }
  64.     // set tt-pos
  65.     obj_tt.style.left = intcX - intOffset_X_Pointer + "px";
  66.     if (intBottom < obj_tt.offsetHeight) {
  67.       obj_tt.style.top = intcY - obj_tt.offsetHeight - 10 + "px";
  68.     } else {
  69.       obj_tt.style.top = intcY + intOffset_Y_Pointer + "px";
  70.     }
  71.     obj_tt.style.visibility = "visible";
  72.   }
  73. }


Im Kopfbereich der HTML-Seite sind nur wenige Änderungen notwendig. Das ausgelagerte JavaScript (tooltip.js) sowie zwei Anweisungen zur initialisieren müssen eingebunden werden.

  1. <script type="text/javascript" src="tooltip.js"></script>


  1. window.onload = function() {
  2.   generateToolTips();
  3.   document.onmousemove = tt_position;
  4. }


Nun können unterschiedliche Element mit einen Tooltip versehen werden. Dafür muss dem Element die CSS-Klasse "tt" zugeordnet, sowie der Inhalt des Tooltips in das Attribut "title" geschrieben werden.

  1. <a href="http://www.knoxmic.net" class="tt"
  2.   title="<p>get this tooltip script now</p>">tooltip #1</a>


Das vorgestellte Beispiel kann wieder im Browser betrachtet oder heruntergeladen werden.

 

2 Responses to “Tooltip with JavaScript”


  1. Jan Meese
    March 27th, 2007 at 3:33 pm

    Hallo. Danke für das Script. Nur ein Problem habe ich:
    sobald ich die js. Datei einbinde, wird automatisch eine Leerzeile am Anfang der Seite erzeugt. Es wird kein oder so eingefügt, am Quelltext sehe ich keine Veränderung. Aber der Header meiner Seite rutscht 10 Pixel oder so tiefer.
    Ist das Problem bekannt?


  2. irgendein besucher
    May 27th, 2008 at 1:43 pm

    Hallo Jan, guck dir nochmal die (falls ich mich nicht verzählt habe) 14. Zeile an. Dürfte funktionieren indem du einfach den Zeilenumbruch entfernst ;)

    (Huch sehe grad das Datum der Frage, könnte evtl. aber doch interessant sein, da die Seite hier recht hoch bei google gelistet ist, falls man nach tooltips sucht)


Leave a Reply