A simple Tooltip using javascript.
A “tooltip” is one name given to the small yellow box that appears when you hover over an object on your screen when ‘title’ attribute is use for that particular object.This box simply appears whenever ‘title’ attirbute is use for the particular html element. For eg. Hover Here . When we hover on this link we can see yellow box written ‘tooltip’.This is the defulat tooltip provided by the browser itself.
Now a days tool tip are widely used in many customized forms using javascript avoiding the default yellow box that browser provides.It is basically used to display the short contents for the particular objects in more attractive way and to enhance the users experience. I tried to make simple javascript tooltip which works in every DOM element which has class named as ‘tooltip’ i.e ‘<a>’,’ <div>’,'<span>’ etc .It simply catches the mousemove event and its respective x and y coordinates with respect to browser window.It is tested in the Firefox and IE.Furthermore, it can be easily customized as the codes are well commented.
How to use:
- Download the ‘tooltip.js’ from the link provided below. Include the js file before head tag.
Eg.....<script src='tooltip.js'></script></head>
- Just give the class=’tooltip’ on the anchor tag where u want tooltip to be displayed.
Eg <a href="#" class='tooltip' title='I want be displayed on tooltip''>Tooltip</a>
- Give that value to the title attribute which you want to be displayed on the tooltip .
DEMO
Download Link (JS file ) :tooltip.js
Download Link (Image file ) :Tool Tip Image
Note: By default image file is on the same directory that of js file. If you want to change the image path then find the ‘url’ on the js file and change the image path next to css ‘url’.
Loading ...
thx for share..
can i display the box for float right? i dnt know where is parameter to set to right.. because i used it on right colomn on my website….default from left to right (display).,..not right to left..
im glad if u help me
@andika well to align the tooltip at the right , we need a new image with arrow aligned to the right , which we have aligned to left currently , if u can do this by your own then i can help you edit the js code and send it to you
@prabeen thx for reply
i can create the image
http://templatebagus.com/template/classic-white/images/t_t-r.gif is very simple just flip ur original image..
can u edit the js code, for right?
visit my web..on the latest news, i use ur tool tips ;
) with my css..round n shadow..is look better
i share here, on tooltips.js find
_span.style.cssText = ‘ display: block;background-color:#FAF9C0;padding:0px;border:1px solid #E1D9A8;border-top:none;padding:8px;’;
replace with
_span.style.cssText = ‘ display: block;background-color:#FAF9C0;padding:0px;border:1px solid #E1D9A8;border-top:none;padding:8px;-moz-border-radius:5px;it-border-radius:5px;border-radius:5px;-moz-box-shadow: 5px 5px 8px #818181;-webkit-box-shadow: 5px 5px 8px #818181;box-shadow: 5px 5px 8px #818181;’;
but the picture is not perfect..cannot be rounded too..
im glad if u help me again
im sory my english so bad
@andkia
Here is your solution
Replace the function ‘showDiv(t1) on line no 30
With
function showDiv(tl)
{
var t = document.getElementById(‘spanBox’);
t.lastChild.innerHTML = tl;
//t.innerHTML = tl;
t.style.display = ‘block’;
z = eval(y) + 25;
// adjust the right position by altering the number 15
r = (eval(x) – t.offsetWidth) + 15 ;
if (r < 0 )
r = 3;
// to make dynamic position of the tooltip
t.style.top = z + “px”;
t.style.left = r + “px”;
}
I hope this helps, u can adjust the right position as per your desire. I have commented on the code where exactly u got to alter the value.
I hope this helps
@prabeen
is look good
prabeen u dn’t install code parser? hemmm
i got error for >> t.style.left = r + “px”;
i replace with >> t.style.left = r + “px”;
look same but not same
on error console firefox “ilegal char”
n this :
r = (eval(x) – t.offsetWidth) + 15 ;
– on here (not minus)
i replace with : – (minus)
maybe u can use code parser for type code like js or php..only my suggestion
/
but thx u very much prabeen. im very gladly
owh god my comment, this automatic replace “single quote with “double quote” and minus replace with – (not minus char)
@andika , thanks for your suggestion , i never noticed about that , I will install it .I hope you get the code work .