Cara Memasang Tooltip Dengan Javascript

Penulis: Anawia putra | anawia.com

Biar tutorial ini menjadi bikin anda penasaran, coba anda arahkan mouse anda pada text berikut ini. Cara memasang tooltip dengan javascript Setelah mouse anda arahkan pada text diatas untuk beberapa saat, maka anda akan melihat sebuah tampilan kotak yang berisi diskripsi yang menjelaskan wacana isi dari text tersebut. Kotak yang muncul inilah yang disebut dengan tooltips. Trus bagaimana cara menciptakan tooltip menyerupai diatas? Untuk itu ikuti tutorial ini sampai selesai.

Tempat Blogging  

Tempat Blogging Untuk menciptakan tooltip diatas kita memerlukan instruksi javascript. Untuk instruksi scriptnya dapat anda lihat pada kotak dibawah ini.

Tempat Blogging  

Tempat Blogging <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") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(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
}
}
function positiontip(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 isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the sajian 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 sajian 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"
}
}

function hideddrivetip(){
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>

Tempat Blogging  

Tempat Blogging Untuk mengatur bagaimana tampilan tooltip tersebut nantinya, maka disini memerlukan instruksi style. Kode yang diharapkan menyerupai berikut ini.

Tempat Blogging  

Tempat Blogging <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 always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
</style>

Tempat Blogging  

Tempat Blogging Kode script dan style diatas sebelumnya letakkan dihosting anda. Jika anda memakai blogger, maka anda dapat memakai saran untuk meletakkan javascript menyerupai pada posting solusi hosting javascript di blogger . untuk instruksi style dapat digabungkan dengan instruksi style blog di atas </head>.

Tempat Blogging  

Tempat Blogging Setelah instruksi javascript dan style telah diletakkan dengan benar, maka selanjutnya kita meletakkan instruksi tooltip di kawasan yang kita inginkan. Misalnya kita ingin memasang tooltip pada link referral. Dengan begitu akan menciptakan pembaca lebih tertarik untuk bergabung dengan referral kita. Misalnya kita ingin meletakkan tooltip di text Cara memasang tooltip dengan javascript. Maka alhasil menjadi menyerupai berikut ini. Kode yang kita pasang pada sebuah link :

Tempat Blogging  

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

 

Tempat Blogging keterangan : merah = text yang kita inginkan muncul di tooltip Biru = lebar kotak yang kita inginkan secara keseluruhan kodenya menjadi menyerupai berikut ini.

Tempat Blogging  

<a onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang menciptakan text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()" href=" " target="_blank">Cara memasang tooltip dengan javascript</a>

 

Tempat Blogging jadi instruksi tersebut dapat kita pasang pada link refferal, banner atau yang lainnya. untuk mengubah warna background kotak tersebut dapat kita lakukan melalui style css diatas. Akhirnya simpulan juga tutorial javasript episode kali ini. agar tutorial ini dapat mempunyai kegunaan untuk anda. Terima kasih banyak buat O-Om yang sudah mau menampilkan goresan pena saya.

Penasaran siapa dibalik penulis artikel ini? Anawia putra | anawia.com

Share this post