How to install the tooltip with javascript by retnet

VIEWS: 39 PAGES: 3

More Info
									Let this tutorial to make you curious, you try your mouse on the text below. How to put a tooltip with
javascript When you point the mouse in the text above for a while, then you will see a display box
containing descriptions that describe the contents of the text them. Box that appears is called the
tooltips. Then how do I create a tooltip as above? For that follow this tutorial to complete.

To create a tooltip above we need the javascript code. For script code you can see in the box below.
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II-© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetfromcursorX = 12 / / Customize x offset of tooltip
var offsetfromcursorY = 10 / / Customize y offset of tooltip
var offsetdivfrompointerX = 10 / / Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY = 14 / / Customize y offset of tooltip DIV relative to pointer image
document.write ('<div id="dhtmltooltip"> </ div>') / / write out tooltip DIV
document.write ('<img id="dhtmlpointer" src="arrow2.gif">') / / write out pointer image

var ie = document.all
var ns6 = document.getElementById & &! document.all
var enabletip = false
if (ie | | ns6)
var tipobj = document.all? document.all ["dhtmltooltip"]: document.getElementById?
document.getElementById ("dhtmltooltip"): ""
var pointerobj = document.all? document.all ["dhtmlpointer"]: document.getElementById?
document.getElementById ("dhtmlpointer"): ""
ietruebody function () {
return (document.compatMode & & document.compatMode! = "BackCompat")?
document.documentElement: document.body
}
ddrivetip function (thetext, thewidth, thecolor) {
if (ns6 | | ie) {
if (typeof thewidth! = "undefined") tipobj.style.width = thewidth + "px"
if (typeof thecolor! = "undefined" & & thecolor !="") tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return false
}
}
positiontip function (e) {
if (enabletip) {
var nondefaultpos = false
var curX = (ns6)? e.pageX: event.clientX ietruebody + (). scrollLeft;
var curY = (ns6)? e.pageY: event.clientY ietruebody + (). scrollTop;
/ / Find out how close the mouse is to the corner of the window
var winwidth = ie & &! window.opera? ietruebody (). clientWidth: window.innerWidth-20
var winheight = ie & &! window.opera? ietruebody (). clientHeight: window.innerHeight-20

var rightedge = ie & &! window.opera? winwidth-event.clientX-offsetfromcursorX: winwidth-
e.clientX-offsetfromcursorX
var bottomedge = ie & &! window.opera? winheight-event.clientY-offsetfromcursorY: winheight-
e.clientY-offsetfromcursorY

var leftedge = (offsetfromcursorX <0)? offsetfromcursorX * (-1): -1000

/ / If the horizontal distance is not enough to accomodate the width of the context menu
if (rightedge <tipobj.offsetWidth) {
/ / Move the horizontal position of the menu to the left by it's width
tipobj.style.left = curX-tipobj.offsetWidth + "px"
nondefaultpos = true
}
else if (curX <leftedge)
tipobj.style.left = "5px"
else {
/ / Position the horizontal position of the menu where the mouse is positioned
tipobj.style.left = curX offsetfromcursorX-offsetdivfrompointerX + + "px"
pointerobj.style.left = curX offsetfromcursorX + + "px"
}
/ / Same concept with the vertical position
if (bottomedge <tipobj.offsetHeight) {
tipobj.style.top = curY-tipobj.offsetHeight-offsetfromcursorY + "px"
nondefaultpos = true
}
else {
tipobj.style.top = curY + + offsetfromcursorY offsetdivfrompointerY + "px"
pointerobj.style.top = curY offsetfromcursorY + + "px"
}
tipobj.style.visibility = "visible"
if (! nondefaultpos)
pointerobj.style.visibility = "visible"
else
pointerobj.style.visibility = "hidden"
}
}

hideddrivetip function () {
if (ns6 | | ie) {
enabletip = false
tipobj.style.visibility = "hidden"
pointerobj.style.visibility = "hidden"
tipobj.style.left = "-1000px"
tipobj.style.backgroundColor =''
tipobj.style.width =''
}
}
document.onmousemove = positiontip
</ Script>
To adjust how the tooltip it later on, so here need a style code. Required code like the following.
<style type="text/css">
# Dhtmltooltip {
position: absolute;
left:-300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: # E1EEFD; font-family: "Verdana", Arial; font-size: 12px;
visibility: hidden;
z-index: 100;
/ * Remove below line to remove shadow. Below line Should Appear always last within this CSS * /
filter: progid: DXImageTransform.Microsoft.Shadow (color = gray, direction = 135);
}
# Dhtmlpointer {
position: absolute;
left:-300px;
z-index: 101;
visibility: hidden;
}
</ Style>
Code above the script and style before you put it hosted. If you use blogger, then you can use javascript
like the suggestion to put on a post in blogger javascript hosting solutions . for code style can be
combined with a blog style code above </ head>.
Once the code is javascript and style has been placed correctly, then the next we put tooltip code in
place that we want. Suppose we want to put a tooltip on the referral link. That would make the reader
more interested in joining our referral. Suppose we want to put the tooltip in text mode tooltip with
javascript installed . So the result becomes as follows. The code that we put on a link:

      onmouseover="ddrivetip(' tutorial bagaimana memasang sebuah tooltip yang
      membuat text menjadi lebih menarik .', 240 )"
      onmouseout="hideddrivetip()"

description: red = text that we want it to appear in the tooltip Blue = width of the box as a whole we
want to be like the following code.
      <a onmouseover="ddrivetip(' tutorial bagaimana memasang sebuah tooltip yang
      membuat text menjadi lebih menarik .', 240)" onmouseout="hideddrivetip()"
      href="http://www.o-om.com/2010/02/cara-memasang-tooltip-dengan-
      javascript.html" target="_blank">Cara memasang tooltip dengan
      javascript</a>

so can we put the code on the referral link, banner or other. to change the background color of the box
can be done via css style above. Finally finished the tutorial also javasript this episode. I hope this
tutorial can be useful for you. Thank you very much for the O-Om who already want to show my
writing.

								
To top