?
Solved

dhtml tooltips

Posted on 2004-08-09
3
Medium Priority
?
583 Views
Last Modified: 2012-08-14
I'm using a tooltip/mouseover routine to display help text on mouseovers. My problem is that with the script I found, the tip always comes up to the right of the mouseover object. That's all good and well on the left side of the screen, but when I add it to an object on the right side of the screen, when the mouseover happens, the tip displays off-screen to the right of the object. That happening produces a horizontal scroll bar on the browser, but if you try to scroll over, the mouseout event happens, effectively removing the tooltip, eliminating the need for the scroll bar. My question is, what can I do to the following script to be able to specify whether I want the tip to appear to the right or the left of the object.

the css :
<STYLE>
  #tipBox {width: 160px;
               z-index: 100;
               border: 1pt black solid;
               background: #eeeeee;
               visibility: hidden;
               color:#003366;
               font-family:Arial, Helvetica, sans-serif;
               font-size:10pt;
               font-weight:bold;
               text-align:center;
               position:absolute;}
</STYLE>

the javascript :
<SCRIPT>
  var allSupport = document.all!=null

  function setupEventObject(e) {
    // Map NS event object to IEs
    if (e==null) return // IE returns
      window.event = e
    window.event.fromElement = e.target
    window.event.toElement = e.target
    window.event.srcElement = e.target
    window.event.x = e.x
    window.event.y = e.y
    // Route the event to the original element
    // Necessary to make sure _tip is set.
    window.event.srcElement.handleEvent(e);
  }

  function checkName(src) {
    // Look for tooltip in IE
    while ((src!=null) && (src._tip==null))
      src = src.parentElement
    return src
  }

  function getElement(elName) {
    // Get an element from its ID
    if (allSupport)
      return document.all[elName]
    else
      return document.layers[elName]
  }

  function writeContents(el, tip) {
    // Replace the contents of the tooltip
    if (allSupport)
      el.innerHTML = tip
    else {
      // In NS, insert a table to work around stylesheet rendering bug.
      // NS fails to apply style sheets when writing contents into a positioned element.
      el.document.open()
      el.document.write("<TABLE WIDTH=200 BORDER=1 bordercolor=black><TR><TD WIDTH=100% BGCOLOR=yellow>")
      el.document.write(tip)
      el.document.write("</TD></TR></TABLE>")
      el.document.close()
    }
  }

  function getOffset(el, which) {
    // Function for IE to calculate position of an element.
    var amount = el["offset"+which]
    if (which=="Top")
      amount+=el.offsetHeight
    el = el.offsetParent
    while (el!=null) {
      amount+=el["offset"+which]
      el = el.offsetParent
    }
    return amount
  }

  function setPosition(el) {
    // Set the position of an element
    src = window.event.srcElement
    if (allSupport) {
      el.style.pixelTop = getOffset(src, "Top")
      el.style.pixelLeft = getOffset(src, "Left") + 100
    }else{
      el.top = src.y + 20
      el.left = src.x
    }
  }

  function setVisibility(el, bDisplay) {
    // Hide or show to tip
    if (bDisplay)
      if (allSupport)
        el.style.visibility = "visible"
      else
        el.visibility = "show";
    else
      if (allSupport)
        el.style.visibility = "hidden"
      else
        el.visibility = "hidden"
  }

  function displayContents(tip) {
    // Display the tooltip.
    var el = getElement("tipBox")
    writeContents(el, tip)
    setPosition(el)
    setVisibility(el, true)
  }

  function doMouseOver(e) {
    // Mouse moves over an element
    setupEventObject(e)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if  (!el._display) {
        displayContents(el._tip)
        el._display = true
      }
  }

  function doMouseOut(e) {
    // Mouse leaves an element
    setupEventObject(e)
    el = checkName(window.event.srcElement)
    var el, tip
    if ((el = checkName(window.event.srcElement))!=null)
      if (el._display)
        if ((el.contains==null) || (!el.contains(window.event.toElement))) {
          setVisibility(getElement("tipBox"), false)
          el._display = false
        }
  }

  function doLoad() {
    // Do Loading
    if ((window.document.captureEvents==null) && (!allSupport))
      return // Not IE4 or NS4
    if (window.document.captureEvents!=null)  // NS - capture events
      window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
    window.document.onmouseover = doMouseOver;
    window.document.onmouseout = doMouseOut;
  }

  window.onload = doLoad
</SCRIPT>

At the very start of the html :
<DIV ID="tipBox"></DIV>

The mouseover html :
<a onmouseover="this._tip = 'Questionnaire homepage.'" href="/quest/" style="color:white;font-weight:bold;font-size:10pt;">Questionnaires - Main</a>
0
Comment
Question by:tatlady
  • 2
3 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 11753413
Hi

Try changing these lines:

<a onmouseover="this.onLeft=true;this._tip = 'Questionnaire homepage.';'"        (if you want right, onLeft to equal false)


In function doMouseOver(e), change these lines:
if  (!el._display) {
        displayContents(el._tip,el.onLeft)
        el._display = true
      }

Change displayContents(tip) to this:

function displayContents(tip,pos) {
   // Display the tooltip.
    var el = getElement("tipBox")
    writeContents(el, tip)
    setPosition(el,pos)
    setVisibility(el, true)
  }

Finally, change setPosition(el) to this:

function setPosition(el,pos) {
    // Set the position of an element
    src = window.event.srcElement
    newPos = (pos) -100 : 100;
    if (allSupport) {
      el.style.pixelTop = getOffset(src, "Top")
      el.style.pixelLeft = getOffset(src, "Left") + newPos
    }else{
      el.top = src.y + 20
      el.left = src.x
    }
  }

Regards,
Zyloch
0
 

Author Comment

by:tatlady
ID: 11753875
the following line :

newPos = (pos) -100 : 100;

in setPosition() is giving me an error :

expected ';'
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11753972
Oops, my bad, should be

newPos = (pos) ? -100: 100;
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question