Click here to Skip to main content
15,444,353 members
Articles / Programming Languages / Javascript
Posted 25 Oct 2002


38 bookmarked

Transparent pop-up link with desciption using JavaScript and CSS

Rate me:
Please Sign up or sign in to vote.
4.47/5 (16 votes)
28 Oct 20021 min read
A simple way to make a transparent pop-up link with description.

Sample Image - maximum width is 600 pixels


When I was surfing the web, I found some websites using some cool pop-up links with a description or you may call it a tooltip or titletip. I found it very interesting because of its transparency and thought may be you'll like it too, so I posted this article. Using a little JavaScript and CSS can help you do that easily.

Using CSS

In CSS, you would just add this code to the top of your page below the <head>, to make a CSS class in order to customize the look of the pop-up.

<style type="text/css">
  .transparent {
    color: white;
    border: 1 green solid;

The heart of the code above, is the 3rd line: filter:alpha(opacity=90);. This line makes the popup transparent with the opacity value set to 90. You can set the opacity within 0 - 100. If you set to 0, you won't see the popup.

Using JavaScript

Add the script below right after the CSS above.

    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show()
        /* get the mouse left position */
        x = event.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = event.clientY + document.body.scrollTop + 35;
        /* display the pop-up */"block";
        /* set the pop-up's left */ = x;
        /* set the pop-up's top */ = y;
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
        /* hide the pop-up */"none";

The code above is quite simple, there're only 2 functions, one to display the pop-up and another to hide the pop-up.

Using HTML

The last part is some HTML, as the code below, to the body of the page and get it up and running.

<body bgcolor="black" text="white">
<a href="" onMouseOut="Hide()" onMouseOver="Show()" 
  onMouseMove="Show()">Move the mouse over here</a><br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link. 
<div id="Popup" class="transparent">
    <div style="background-color: #003366">
      <b>Title goes here</b></div>
    <div></b>Description goes here</div>

What else?

If you change a little bit in the CSS code, you'll get 2 more types of pop-up:

  1. Change the line filter:glow(opacity=90); to filter:progid:DXImageTransform:Microsoft.Glow(color=yellow,strength=5); and you'll get this kind of pop-up:

    Sample Image - maximum width is 600 pixels

  2. Or change the line filter:glow(opacity=90); to filter:progid:DXImageTransform:Microsoft.DropShadow(color=yellow,strength=5); and you'll get a pop-up with shadow:

    Sample Image - maximum width is 600 pixels

Note that the 2 types above work only with IE5.5+. Hope this is helpful for you!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By
Singapore Singapore
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

GeneralWhite space Pin
natelywills30-Apr-09 5:25
Membernatelywills30-Apr-09 5:25 
GeneralGood Pin
Abbas Ali Butt10-Sep-08 4:22
MemberAbbas Ali Butt10-Sep-08 4:22 
GeneralDatabase record Pin
bidox25-Mar-08 11:09
Memberbidox25-Mar-08 11:09 
GeneralMultiple Links Pin
bigleo2311-Dec-07 8:42
Memberbigleo2311-Dec-07 8:42 
Questioncan you use this more than once? Pin
Anonymous30-Nov-03 23:09
MemberAnonymous30-Nov-03 23:09 
AnswerRe: can you use this more than once? Pin
guga208-Mar-07 2:26
Memberguga208-Mar-07 2:26 
GeneralLinks Pin
ruben101028-May-03 3:42
Memberruben101028-May-03 3:42 
GeneralRe: Links Pin
Zek3vil28-May-03 3:54
MemberZek3vil28-May-03 3:54 
QuestionCross-browser compatible? Pin
Christian Merritt28-Oct-02 1:38
MemberChristian Merritt28-Oct-02 1:38 
AnswerRe: Cross-browser compatible? Pin
Zek3vil28-Oct-02 3:56
MemberZek3vil28-Oct-02 3:56 
GeneralRe: Cross-browser compatible? Pin
Wilhelm Berg29-Oct-02 21:02
MemberWilhelm Berg29-Oct-02 21:02 
GeneralRe: Cross-browser compatible? Pin
max_dcosta17-Nov-02 19:36
Membermax_dcosta17-Nov-02 19:36 
GeneralRe: Cross-browser compatible? Pin
Wilhelm Berg17-Nov-02 20:51
MemberWilhelm Berg17-Nov-02 20:51 
GeneralRe: Cross-browser compatible? Pin
max_dcosta17-Nov-02 20:55
Membermax_dcosta17-Nov-02 20:55 
GeneralRe: Cross-browser compatible? Pin
Wilhelm Berg18-Nov-02 5:39
MemberWilhelm Berg18-Nov-02 5:39 
GeneralRe: Cross-browser compatible? Pin
theJazzyBrain22-Aug-03 3:30
MembertheJazzyBrain22-Aug-03 3:30 
GeneralRe: Cross-browser compatible? Pin
Member 377522411-Jul-08 23:54
MemberMember 377522411-Jul-08 23:54 
GeneralRe: Cross-browser compatible? Pin
Kastellanos Nikos10-Feb-03 23:10
MemberKastellanos Nikos10-Feb-03 23:10 
GeneralRe: Cross-browser compatible? Pin
Anonymous9-Jul-03 11:21
MemberAnonymous9-Jul-03 11:21 
GeneralRe: Cross-browser compatible? Pin
worldspawn7-Sep-03 16:38
Memberworldspawn7-Sep-03 16:38 
...or even netscape? why punish urself?

(netscape == inferiorProduct) returns true;

GeneralRe: Cross-browser compatible? Pin
Anonymous9-Jun-04 18:27
MemberAnonymous9-Jun-04 18:27 
AnswerRe: Cross-browser compatible? [modified] Pin
Member 37781603-Jul-08 9:19
MemberMember 37781603-Jul-08 9:19 
AnswerRe: Cross-browser compatible? Pin
Jakob Flygare18-Aug-08 4:42
MemberJakob Flygare18-Aug-08 4:42 
GeneralRe: Cross-browser compatible? Pin
Jakob Flygare18-Aug-08 4:55
MemberJakob Flygare18-Aug-08 4:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.