Solved

Kontext-Help for Text

Posted on 1998-12-30
5
157 Views
Last Modified: 2011-10-03
I want that a little box with a special text will be opened when I move the mouse over a simple Text (not a formula field or hypertext-link).
This should be the same effect like moving the mouse over a graphic (Alt-Tag).
I would like to run this system on the Internet Explorer 4.0 from Microsoft.
0
Comment
Question by:Meiki
  • 3
5 Comments
 
LVL 19

Expert Comment

by:cheekycj
ID: 1841102
This code will work in both IE4 and NS4: (from www.insidedhtml.com)
______________________________________________________
<HTML>
<HEAD>
<TITLE>Tooltips</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
 NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
 window.name = "main"
// -->
</SCRIPT>


<SCRIPT language="javascript">
  <!--
  /*  Your are permitted to reuse this code as long as the following copyright
      notice is not removed:

      This HTML tip handling is copyright 1998 by insideDHTML.com, LLC. More information about this
      code can be found at Inside Dynamic HTML: HTTP://www.insideDHTML.com
  */


  // Support for all collection
  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=lightgrey>")
      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")
    } else
    {
      el.top = src.y + 20 //window.event.y + 15
      el.left = src.x + 75 //window.event.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>
<STYLE>
  <!--
  #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey; visibility: hidden}
  -->
</STYLE>


</HEAD>
<BODY BGCOLOR=white>
<DIV ID=tipBox>
</DIV>


<P>Here is a demonstration of tooltips:<BR>
<A HREF="javascript:void(0);" onMouseOver="this._tip='What can you do with<FONT COLOR=red><B>DHTML</B></FONT>';return true;">DHTML</A><br>
<A HREF="javascript:void(0);" onMouseOver="this._tip='Second test'">example</A>


</BODY>
</HTML>

___________________________________________

To change where the tooltip showsup change setPosition function (x,y values there)
To change color of what shows up and other visual things change:
writeContent function (table color,border,etc)
and make the similar changes in the below line:
#tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey; visibility: hidden}

This should help you.

Happy New Year,
CJ

0
 

Author Comment

by:Meiki
ID: 1841103
Very Very good
Thank you very much...
0
 
LVL 4

Expert Comment

by:martinag
ID: 1841104
I you like cheekycj's solution you should accept his answer.

Martin
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 1841105
Is there a reason why you rejected my answer?  It does work.

CJ
0
 
LVL 19

Accepted Solution

by:
cheekycj earned 10 total points
ID: 1841106
Posting my answer again...  (in case you rejected it by accident)

This code will work in both IE4 and NS4: (from www.insidedhtml.com)
      ______________________________________________________
      <HTML>
      <HEAD>
      <TITLE>Tooltips</TITLE>

      <SCRIPT LANGUAGE="JavaScript">
      <!--
       NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
       window.name = "main"
      // -->
      </SCRIPT>


      <SCRIPT language="javascript">
        <!--
        /*  Your are permitted to reuse this code as long as the following copyright
            notice is not removed:

            This HTML tip handling is copyright 1998 by insideDHTML.com, LLC. More information about this
            code can be found at Inside Dynamic HTML: HTTP://www.insideDHTML.com 
        */


        // Support for all collection
        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=lightgrey>")
            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")
          } else
          {
            el.top = src.y + 20 //window.event.y + 15
            el.left = src.x + 75 //window.event.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>
      <STYLE>
        <!--
        #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey;
      visibility: hidden}
        -->
      </STYLE>


      </HEAD>
      <BODY BGCOLOR=white>
      <DIV ID=tipBox>
      </DIV>


      <P>Here is a demonstration of tooltips:<BR>
      <A HREF="javascript:void(0);" onMouseOver="this._tip='What can you do with<FONT
      COLOR=red><B>DHTML</B></FONT>';return true;">DHTML</A><br>
      <A HREF="javascript:void(0);" onMouseOver="this._tip='Second test'">example</A>


      </BODY>
      </HTML>

      ___________________________________________

      To change where the tooltip showsup change setPosition function (x,y values there)
      To change color of what shows up and other visual things change:
      writeContent function (table color,border,etc)
      and make the similar changes in the below line:
      #tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: lightgrey;
      visibility: hidden}

      This should help you.

      Happy New Year,
      CJ
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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)

832 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