DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone >

Typed Tooltip Effect

Roy Marchand user avatar by
Roy Marchand
·
Mar. 20, 07 · · Code Snippet
Like (0)
Save
Tweet
630 Views

Join the DZone community and get the full member experience.

Join For Free
This simple bit of scripting will create a dynamic typing effect for your tool tips.
The script can be 
seen implemented here



var str='';
var obj='false';
var pntr='';
var cnt=0;
var textArr = new Array(5);
textArr[0] = "All your bases are belong to us!";
textArr[1] = "The answer is 42; of course.";
textArr[2] = "The end of the universe will be the result of a mis-calculation in the core.";
textArr[3] = "I don't believe its alive; but it thinks it is.";
textArr[4] = "About 10 seconds after you open it; you'll wish you hadn't";

function looptext()
{
   obj.innerHTML=str.substr(0,cnt);
   cnt++;
   if (cnt<=str.length) setTimeout('looptext()',100);
}

function typeText(lnk,lyr)
{
   str=textArr[lyr];
   pntr= 'lyr'+lyr;
   obj=document.getElementById(pntr);
   obj.style.left=(lnk.offsetLeft+30)+'px';
   obj.style.top=(lnk.offsetTop+25)+'px';
   obj.style.display='block';
   cnt=1;
   looptext();
}

function clearText(lyr)
{
   cnt=2500;
   pntr='lyr'+lyr;
   obj=document.getElementById(pntr);
   obj.style.display='none';
   obj.style.left='-50px';
   obj.style.top='-50px';
   obj.innerHTML=' ';
}

The links using the effect are done this way:


    
   This is link Three
   

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Handle Early Startup Technical Debt (Or Just Avoid it Entirely)
  • How Does the Database Understand and Execute Your Query?
  • Ultra-Fast Microservices in Java: When Microstream Meets Open Liberty
  • How to Use Geofences for Precise Audience Messaging

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo