Professor Al Presents JavaScript Scrolling Texttip Script

Examples by Prof. Al Pure JavaScript At Work Here!

MSIE Scrolling Text Tip

Go to Prof Al's Go to Prof Al's Sandbox

Credits: Dynamic Drive
Description: A script that creates a "scrolling" tooltip. An eye catcher, if nothing else. (Note that in IE, the tooltip will only be enabled after the document has completed loading).

Highlight all the code in the textbox below and paste it into the body of your document. Follow the advice given in the comment tags to adapt the code for yourself.

Select All

<script type="text/javascript">
        /* This is the script for the Scrolling Marquee text links */
        if (!document.layers&&!document.all)
        event="test"
        function showtip2(current,e,text){
        
        if (document.all&&document.readyState=="complete"){
        document.all.tooltip2.innerHTML='
        <marquee style="border:1px solid black;">
        '+text+'
        </marquee>
        '
        document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
        document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
        document.all.tooltip2.style.visibility="visible"
        }
        
        else if (document.layers){
        document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
        document.tooltip2.document.nstip.document.close()
        document.tooltip2.document.nstip.left=0
        currentscroll=setInterval("scrolltip()",100)
        document.tooltip2.left=e.pageX+10
        document.tooltip2.top=e.pageY+10
        document.tooltip2.visibility="show"
        }
        }
        function hidetip2(){
        if (document.all)
        document.all.tooltip2.style.visibility="hidden"
        else if (document.layers){
        clearInterval(currentscroll)
        document.tooltip2.visibility="hidden"
        }
        }
        
        function scrolltip(){
        if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
        document.tooltip2.document.nstip.left-=5
        else
        document.tooltip2.document.nstip.left=150
        }
        
        < /script >
        
        < div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightcyan;color:black;font-weight:bold;" >
        < layer name="nstip" width=1000px bgColor="lightcyan" >< /layer >
        < /div >

Giving text links a tooltip:
Having done the above, simply insert the below into either the <a> tag of the text link, or right alongside the href attribute of each image spot:

<a href="http://profal.com/sandbox-interface1.html" onMouseover="showtip2(this,event,'Visit Prof Als Sandbox and try out many other JavaScript and DHTML tricks!')" onMouseout="hidetip2()"> Go to Prof Al's SandBox </A>

with the part in white representing the text you want shown inside the scrolling tip. Note that for the scrolling tooltip script, there is no need to "break" text if it is very long; it is a scrolling tooltip, after all!

Return to the main Home page here.

Copyright © 2001-2011 Professor Al al.fichera@gmail.com
Page Last Updated on: June 8, 2011