Create a Nice, Lightweight JavaScript Tooltip

Create a Nice, Lightweight JavaScript Tooltip

Sunday, June 26, 2011 | Posted by ArtisTutor | Edit Post

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

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email