• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 187
  • Last Modified:

Kontext-Help for Text

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
Meiki
Asked:
Meiki
  • 3
1 Solution
 
cheekycjCommented:
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
 
MeikiAuthor Commented:
Very Very good
Thank you very much...
0
 
martinagCommented:
I you like cheekycj's solution you should accept his answer.

Martin
0
 
cheekycjCommented:
Is there a reason why you rejected my answer?  It does work.

CJ
0
 
cheekycjCommented:
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now