Create a Nice, Lightweight JavaScript Tooltip

In this tutorial you will learn how to add to your posts , to specific words or phrases some javascript tooltips. What is a tooltip?
A tooltip is a small pop-up window that appears when a user pauses the mouse pointer over an element, such as over a Button. This tutorial introduces the tooltip and discusses how to create and customize tooltip content.When a user moves the mouse pointer over an element that has a tooltip, a window that contains tooltip content (for example, text content that describes the function of a control) appears for a specified amount of time. If the user moves the mouse pointer away from the control, the window disappears because the tooltip content cannot receive focus.
The content of a tooltip can contain one or more lines of text, images, shapes, or other visual content.

How to Create a Nice, Lightweight JavaScript Tooltip?


1. Log in to your dashboard--> Design- -> Edit HTML 

2. Search "Ctrl+F" and find ]]></b:skin> . Then above it paste the next code:

#tt {
 position:absolute;
 display:block;
  }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 overflow:hidden;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 border: 2px solid #666 ;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 8px 8px 8px 0px;
border-radius: 8px 8px 8px 0px;
 }

.hotspot {
color:#900; 
padding-bottom:1px; 
border-bottom:1px dotted #900; 
cursor:pointer
}

3. Find </head> and above him paste the next code:

<script type='text/javascript'>
      //<![CDATA[
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300; /*Tooltip width. Change according you needs*/
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
   if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
   h = parseInt(tt.offsetHeight) + top;
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
    if(endalpha - a < speed && d == 1){
     i = endalpha - a;
    }else if(alpha < speed && d == -1){
     i = a;
    }
    alpha = a + (i * d);
    tt.style.opacity = alpha * .01;
    tt.style.filter = 'alpha(opacity=' + alpha + ')';
   }else{
    clearInterval(tt.timer);
    if(d == -1){tt.style.display = 'none'}
   }
  },
  hide:function(){
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();
//]]>
    </script>

4. Save the template.

5. Create a new post and write a couple lines of text.To build and hide a tooltip call the script as below. The second parameter in the show function is optional, if not passed the width will automatically adjust to the content within the maxh limit.

onmouseover="tooltip.show('Testing  123 ', 200);"
onmouseout="tooltip.hide();"

Exemple:

We have the phrase:

Proin eget elit justo, vitae molestie ligula. Sed molestie ligula quis elit facilisis id tempor magna malesuada. In eu eros nisl.


... and we want to have a tooltip over the " tempor" word. We will use the code on step 5 like this:


Proin eget elit justo, vitae molestie ligula. Sed molestie ligula quis elit facilisis id <span class="hotspot" onmouseout="tooltip.hide();"onmouseover="tooltip.show('This is the description of the tooltip');">tempor</span>magna malesuada. In eu eros nisl.

The class hotspot is used for customizing the appearance of the word linked to the tooltip, so don't remove it.

DEMO

Get Latest Updates For Free!

Subscribe via Email

4 comments

July 4, 2011 at 4:56 PM

Hi.

If we want to show an image or other visual content, what is to do?

Thanks

July 5, 2011 at 3:38 PM

In this case the tooltip will loke like:

Duis vel <span class="hotspot" onmouseover="tooltip.show('<img src=\'images/x_icon.gif\'/>');" onmouseout="tooltip.hide();">purus eget diam</span> aliquam luctus.

For adding image tooltis just replace:

images/x_icon.gif

with your image link. Then change on the step 3 code :

var maxw = 300;

to

var maxw = ???;

??? represent you own width value.

July 5, 2011 at 5:04 PM

Great, thanks very much, it works fine

July 5, 2011 at 5:27 PM

Glad it's working.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers