Cara Membuat dan Memasang Javascript ToolTip dengan Efek Transparansi

Mencoba memberikan panduan BloGGeR melalui BlogDETIK yang melibatkan penggunaan kode html memang merupakan tantangan tersendiri yang membutuhkan pemikiran lebih. Dari usaha yang aku lakukan untuk mencari sebuah Panduan BlogDETIK ataupun Tutorial BlogDETIK yang mengupas tentang bagaimana menciptakan posting kode html dan javascript paling tepat ternyata tidak ada sama sekali. Kembali aku harus memeras otak ku yang sudah semakin lemot untuk mensiasati supaya tutorial BloGGeR ataupun yang lain dalam bentuk kode html dan javascript, dengan mudah dapat langsung di copy paste dalam ruang edit html.

Dalam Panduan dan Tutorial BloGGeR kali ini kita akan membuat sebuah tooltip yang dapat digunakan dengan amat mudah tetapi mampu menyuguhkan sebuah tampilan yang amat cantik karena dilengkapi dengan efek transparansi. Javascriptnya terhitung irit karena beban yang ditanggung tak lebih dari 6kb. Menggunakan tooltip ini ditanggung akan memberi kepuasan tersendiri. Ya …, karena cara penggunaannya  amat praktis dan sederhana sehingga membuat posting yang kita lakukan tidak banyak terhambat hanya karena rumitnya menambahkan kode baru pelengkap tooltip. Untuk melihat seperti apa bentuk tooltip ini sampeyan bisa KLIK di sini.

Cara membuat tooltip dengan efek transparansi :

1. Login : Untuk login ke BloGSPOT atau BloGGeR tuliskan User Name/alamat email serta Password (Sandi) .
2. Dasboard : Setelah login dilakukan, sampeyan akan dibawa ke halaman dasbor. KLIK Layout (Tata Letak).
3. Tata Letak : KLIK link Edit HTML.
4. Amankan Template (backup template) : KLIK link Download Template Lengkap, kemudian simpan desain blog (kode template) sampeyan di folder PC.
5. : Cari tag ini. Tag penutup body letaknya di ujung terbawah template sampeyan.
6. Copy-Paste : Copy Javascript kemudian upload terlebih dahulu di javascript hosting baru kemudian letakkan link javascript diatas tag .
7. SAVE Template (Simpan Template) : KLIK “Simpan Template“.
8. Selamat menikmati tooltip cantik baru sampeyan.
9. Beberapa perubahan silahkan untuk dilakukan, misalnya dalam ukuran lebar tooltip, posisi tooltip, warna teks, border serta background tooltips.

Javacsript ToolTIP with transparency effects :

/* bgs1GR- gubhugreyot-bloggerstars1 */
var OP =  navigator.userAgent.indexOf('Opera') != -1);
var IE =  navigator.userAgent.indexOf('MSIE') != -1 && !OP);
var GK =  navigator.userAgent.indexOf('Gecko') != -1);
var SA =  navigator.userAgent.indexOf('Safari') != -1);
var DOM = document.getElementById;
var tooltip = null;
function ToolTIP() {
this.width = 200; // lebar (px)
this.bgColor = "#011130"; // background
this.textFont = "Cataneo BT"; // font-family
this.textSize = 13; // font size (px)
this.textColor = "#a6c4fb"; // warna font
this.border = "2px dotted #555555"; // border
this.opacity = 80;  // opacity (0 - 100)
this.cursorDistance = 5; // jarak dari cursor (px)
this.xPos = 'right';  // posisi vertikal dari cursor
this.yPos = 'bottom';  // posisi horizontal dari cursor
this.text = '';this.height = 0;this.obj = null;this.active = false;
this.create = function() {if(!this.obj) this.init();
var s = (this.textFont ? 'font-family:' + this.textFont + '; ' : '') +
(this.textSize ? 'font-size:' + this.textSize + 'px; ' : '') +
(this.border ? 'border:' + this.border + '; ' : '') +
(this.textColor ? 'color:' + this.textColor + '; ' : '');
var t = '' + '

' + this.text + '
';
if(DOM || IE) this.obj.innerHTML = t;if(DOM) this.height = this.obj.offsetHeight;
else if(IE) this.height = this.obj.style.pixelHeight;
if(this.bgColor) this.obj.style.backgroundColor = this.bgColor;this.setOpacity();
this.move();this.show();}
this.init = function() {if(DOM) this.obj = document.getElementById('bgsGR_ToolTip');
else if(IE) this.obj = document.all.ToolTip;}
this.move = function() {var winX = getWinX() - (((GK && !SA) || OP) ? 17 : 0);
var winY = getWinY() - (((GK && !SA) || OP) ? 17 : 0);var x = mouseX;var y = mouseY;
if(this.xPos == 'left') {if(x - this.width - this.cursorDistance >= getScrX())
x -= this.width + this.cursorDistance;else x += this.cursorDistance;}
else {if(x + this.width + this.cursorDistance > winX + getScrX())
x -= this.width + this.cursorDistance;else x += this.cursorDistance;}
if(this.yPos == 'top') {if(y - this.height - this.cursorDistance >= getScrY())
y -= this.height + this.cursorDistance;else y += this.cursorDistance;}
else {if(y + this.height + this.cursorDistance > winY + getScrY())
y -= this.height;else y += this.cursorDistance;}
this.obj.style.left = x + 'px';this.obj.style.top = y + 'px';}
this.show = function() {this.obj.style.zIndex = 69;this.active = true;
this.obj.style.visibility = 'visible';}
this.hide = function() {this.obj.style.zIndex = -1;
this.active = false;this.obj.style.visibility = 'hidden';}
this.setOpacity = function() {this.obj.style.opacity = this.opacity / 100;
this.obj.style.MozOpacity = this.opacity / 100;this.obj.style.KhtmlOpacity = this.opacity / 100;
this.obj.style.filter = 'alpha(opacity=' + this.opacity + ')';}}
function getScrX() {var offset = 0;if(window.pageXOffset)
offset = window.pageXOffset;else if(document.documentElement && document.documentElement.scrollLeft)
offset = document.documentElement.scrollLeft;else if(document.body && document.body.scrollLeft)
offset = document.body.scrollLeft;return offset;}
function getScrY() {var offset = 0;if(window.pageYOffset)
offset = window.pageYOffset;else if(document.documentElement && document.documentElement.scrollTop)
offset = document.documentElement.scrollTop;else if(document.body && document.body.scrollTop)
offset = document.body.scrollTop;return offset;}
function getWinX() {var size = 0;if(window.innerWidth)
size = window.innerWidth;else if(document.documentElement && document.documentElement.clientWidth)
size = document.documentElement.clientWidth;else if(document.body && document.body.clientWidth)
size = document.body.clientWidth;else size = screen.width;return size;}
function getWinY() {var size = 0;if(window.innerHeight)
size = window.innerHeight;else if(document.documentElement && document.documentElement.clientHeight)
size = document.documentElement.clientHeight;else if(document.body && document.body.clientHeight)
size = document.body.clientHeight;else size = screen.height;return size;}
function getMouseXY(e) {if(e && e.pageX != null) {mouseX = e.pageX;mouseY = e.pageY;}
else if(event && event.clientX != null) {mouseX = event.clientX + getScrX();
mouseY = event.clientY + getScrY();}
if(mouseX < 0) mouseX = 0;if(mouseY < 0) mouseY = 0;if(tooltip && tooltip.active) tooltip.move();}
function toolTip(text, width, opacity) {if(text) {tooltip = new ToolTIP();tooltip.text = text;
if(width) tooltip.width = width;if(opacity) tooltip.opacity = opacity;tooltip.create();}
else if(tooltip) tooltip.hide();}
document.write('
');
var mouseX = mouseY = 0;
document.onmousemove = getMouseXY;

Copy paste tanpa harus melakukan perubahan apapun, seperti halnya tanda petik dua (”) dan yang lain.

Cara menuliskan teks link baru yang dilengkapi tooltip :

http://gubhugreyot.blogspot.com" target="_blank" onMouseOver="toolTip('Di sini tempat menuliskan teks tooltip!')" onMouseOut="toolTip()">Tuliskan Teks Link di sini!

Bentuk link Javascript ToolTip di atas tag :

Tutorial Lain