Belajar Membuat Inline HTML Tooltip

Inline HTML Tooltip memungkinkan Anda untuk menentukan link khusus yang akan dibumbui dengan script dan akan tertanam langsung di dalam halaman blog Anda dan muncul setelah link tersebut disorot mouse layaknya title pada sebuah link.

Anda juga dapat menyesuaikan posisinya secara manual menggunakan css jika posisi tooltip terlalu dekat atau terlalu jauh dari link. Silahkan pakai kode-kode dibawah untuk mulai menggunakannya.
HTML
<!-- STAR LINK -->
Ini adalah link <a href="#link-1" rel="ksTooltip">tooltip</a> yang dipublikasikan oleh <a href="#link-2" rel="ksTooltip">sigit purnomo</a> sebagai contoh dari tutorial yang berjudul <a href="http://www.kangsigit.com/2015/12/inline-html-tooltip.html" rel="ksTooltip">Inline HTML Tooltip</a>
<!-- END LINK -->

<!-- STAR DESKRIPSI -->
<div class="ksTooltip">Tooltip adalah blablabla<br />silahkan cari sendiri di <font color="red">google</font></div>
<div class="ksTooltip">Sigit purnomo adalah seorang desainer pemula untuk blogger</div>
<div class="ksTooltip">Untuk info lengkap seputar Inline HTML Tooltip, silahkan klik tautan ini</div>
<!-- END DESKRIPSI -->
JavaScript
/*******
** Get more script: http://www.kangsigit.com **
   *************************************************
*****/
var ksTooltip={
relTooltip: 'ksTooltip',
durasiEfek: [true, 500],
ancorLink: [],
ToololTips: [],

positiontip:function($, tipindex, e){
var anchor=this.ancorLink[tipindex]
var tooltip=this.ToololTips[tipindex]
var scrollLeft=window.pageXOffset? window.pageXOffset : this.iebody.scrollLeft
var scrollTop=window.pageYOffset? window.pageYOffset : this.iebody.scrollTop
var docwidth=(window.innerWidth)? window.innerWidth-15 : ksTooltip.iebody.clientWidth-15
var docheight=(window.innerHeight)? window.innerHeight-18 : ksTooltip.iebody.clientHeight-15
var tipx=anchor.dimensions.offsetx
var tipy=anchor.dimensions.offsety+anchor.dimensions.h
tipx=(tipx+tooltip.dimensions.w-scrollLeft>docwidth)? tipx-tooltip.dimensions.w : tipx
tipy=(tipy+tooltip.dimensions.h-scrollTop>docheight)? tipy-tooltip.dimensions.h-anchor.dimensions.h : tipy
$(tooltip).css({left: tipx, top: tipy})
},

showtip:function($, tipindex, e){
var tooltip=this.ToololTips[tipindex]
if (this.durasiEfek[0])
$(tooltip).hide().fadeIn(this.durasiEfek[1])
else
$(tooltip).show()
},

fadeOutTips:function($, tipindex, e){
var tooltip=this.ToololTips[tipindex]
if (this.durasiEfek[0])
$(tooltip).fadeOut(this.durasiEfek[1])
else
$(tooltip).hide()
},

updateDimensi:function($){
var $ancorLink=$('*[@rel="'+ksTooltip.relTooltip+'"]')
$ancorLink.each(function(index){
this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top}
})
},

jelajah:function(){
jQuery(document).ready(function($){
ksTooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
var $ancorLink=$('*[@rel="'+ksTooltip.relTooltip+'"]')
var $ToololTips=$('div[@class="'+ksTooltip.relTooltip+'"]')
$ancorLink.each(function(index){
this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top}
this.tippos=index+' pos'
var tooltip=$ToololTips.eq(index).get(0)
if (tooltip==null)
return
tooltip.dimensions={w:tooltip.offsetWidth, h:tooltip.offsetHeight}
$(tooltip).remove().appendTo('body')
ksTooltip.ToololTips.push(tooltip)
ksTooltip.ancorLink.push(this)
var $anchor=$(this)
$anchor.hover(
function(e){
ksTooltip.positiontip($, parseInt(this.tippos), e)
ksTooltip.showtip($, parseInt(this.tippos), e)
},
function(e){
ksTooltip.fadeOutTips($, parseInt(this.tippos), e)
}
)
$(window).bind("resize", function(){ksTooltip.updateDimensi($)})
})
})
}
}

ksTooltip.jelajah()
CSS Style
div.ksTooltip{
position: absolute;
z-index: 1000;
left: -1000px;
top: -1000px;
background: #272727;
border: 10px solid black;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
}
jQuery
<script type="text/javascript" src="http://britha.com/Upload/MyFile/jquery-1.2.2.pack.js"></script>

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini