Zikula Community

• dits
  
  

  • Rank: Developer
  • Registered: Feb 17, 2005
  • Last visit: May 21, 2010
  • Posts: 684

  Posted: Jan 26, 2009 - 01:51 AM

  After years of battling with overlib side effects every now and then Erik Spaan pointed me to a useful alternative qTip http://qrayg.com/learn/code/qtip.
  
  qTip needed some modification for it to serve my purpose. Perhaps others might benefit. qTip by default makes popups out off all links, or labels (or whatever is configured). You can't add a 'tooltip' to only one link for instance. Therefore I modified qTip and added a function addtip().
  
  To use this modified version of qTip create a new file javascript/qTip.js, paste this code below in this file:
  

  Code

  // qTip - CSS Tool Tips - by Craig Erskine
  // http://qrayg.com
  //
  // Multi-tag support by James Crooke
  // http://www.cj-design.com
  //
  // Inspired by code from Travis Beckham
  // http://www.squidfingers.com | http://www.podlob.com
  //
  // Copyright (c) 2006 Craig Erskine
  // Permission is granted to copy, distribute and/or modify this document
  // under the terms of the GNU Free Documentation License, Version 1.3
  // or any later version published by the Free Software Foundation;
  // with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
  // A copy of the license is included in the section entitled "GNU
  // Free Documentation License".
  
  var qTipTag = "a,label,input"; //Which tag do you want to qTip-ize? Keep it lowercase!//
  var qTipX = 0; //This is qTip's X offset//
  var qTipY = 10; //This is qTip's Y offset//
  
  //There's No need to edit anything below this line//
  tooltip = {
    name : "qTip",
    offsetX : qTipX,
    offsetY : qTipY,
    tip : null
  }
  
  tooltip.init = function () {
      var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
      if(!tipContainerID){ var tipContainerID = "qTip";}
      var tipContainer = document.getElementById(tipContainerID);
  
      if(!tipContainer) {
        tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
        tipContainer.setAttribute("id", tipContainerID);
        document.getElementsByTagName("body").item(0).appendChild(tipContainer);
      }
  
      if (!document.getElementById) return;
      this.tip = document.getElementById (this.name);
      if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
  }
  
  tooltip.addtip = function (element, tip) {
      element.removeAttribute("title");
      element.removeAttribute("alt");
      element.onmouseover = function() {tooltip.show(tip)};
      element.onmouseout = function() {tooltip.hide()};
      tooltip.show(tip);
  }
  
  tooltip.move = function (evt) {
      var x=0, y=0;
      if (document.all) {//IE
          x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
          y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
          x += window.event.clientX;
          y += window.event.clientY;
         
      } else {//Good Browsers
          x = evt.pageX;
          y = evt.pageY;
      }
      this.tip.style.left = (x + this.offsetX) + "px";
      this.tip.style.top = (y + this.offsetY) + "px";
  }
  
  tooltip.show = function (text) {
      if (!this.tip) return;
      this.tip.innerHTML = text;
      this.tip.style.display = "block";
  }
  
  tooltip.hide = function () {
      if (!this.tip) return;
      this.tip.innerHTML = "";
      this.tip.style.display = "none";
  }
  
  window.onload = function () {
      tooltip.init ();
  }

  
  
  Make sure the script get's loaded in your relevant theme templates.
  
  In your relevant theme style sheet add a style for the div used to display the tooltip like this:

  Code

  div#qTip {
    padding: 3px;
    border: 1px solid #666;
    border-right-width: 2px;
    border-bottom-width: 2px;
    display: none;
    background: #999;
    color: #FFF;
    font: bold 9px Verdana, Arial, sans-serif;
    text-align: left;
    position: absolute;
    z-index: 1000;
  }

  
  
  Finally from your HTML call the addtip function like this

  Code

  Here is a <a href="#" onmouseover="tooltip.addtip(this, 'This is the <em>tooltip</em> text.');">tooltip</a>.

  
  
  
  
  edited by: dits, Jan 26, 2009 - 02:03 PM

  • 
  •  
•  
•  

Users on-line

• rgasch

This list is based on users active over the last 60 minutes.