Membuat Sticky Tooltip

Sticky Tooltip adalah sebuah tooltip yang kaya dengan gaya dan dapat mengdeskripsikan unsur-unsur yang terkait kedalamnya, seperti text maupun gambar, dimana ketika cursor dibawa pada sebuah link atau gambar yang sudah diberikan tooltip, maka tooltip akan terlihat dan dapat mengikuti gerakan cursor.

Tooltip ini juga dapat di "stickied", atau disimpan terlihat pada layar dengan mengklik "kanan" atau dengan menekan huruf "s" dan pengguna pun dapat berinteraksi dengan beberapa konten didalam tooltip tersebut, seperti klik link dan lain sebagainya.

Contoh:

(Letakan cursor pada Link atau Gambar, Kemudian "Klik kanan" atau tekan huruf "s")

• Pulau Tidung

• Snorkeling

Cara Memasang sticky Tooltip

Langkah Pertama:
Copy CSS dan Javascript berikut ini tepat diatas kode </head>

CSS + Javascript

<style type='text/css'>
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}

.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var stickytooltip={
 tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
 fadeinspeed: 200, //duration of fade effect in milliseconds
 rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
 stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
 stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
 stickynotice2: "Click outside this box to hide it", //customize tooltip status message

 //***** NO NEED TO EDIT BEYOND HERE

 isdocked: false,

 positiontooltip:function($, $tooltip, e){
  var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
  var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
  x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
  y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
  $tooltip.css({left:x, top:y})
 },
 
 showbox:function($, $tooltip, e){
  $tooltip.fadeIn(this.fadeinspeed)
  this.positiontooltip($, $tooltip, e)
 },

 hidebox:function($, $tooltip){
  if (!this.isdocked){
   $tooltip.stop(false, true).hide()
   $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
  }
 },

 docktooltip:function($, $tooltip, e){
  this.isdocked=true
  $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
 },


 init:function(targetselector, tipid){
  jQuery(document).ready(function($){
   var $targets=$(targetselector)
   var $tooltip=$('#'+tipid).appendTo(document.body)
   if ($targets.length==0)
    return
   var $alltips=$tooltip.find('div.atip')
   if (!stickytooltip.rightclickstick)
    stickytooltip.stickynotice1[1]=''
   stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
   stickytooltip.hidebox($, $tooltip)
   $targets.bind('mouseenter', function(e){
    $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
    stickytooltip.showbox($, $tooltip, e)
   })
   $targets.bind('mouseleave', function(e){
    stickytooltip.hidebox($, $tooltip)
   })
   $targets.bind('mousemove', function(e){
    if (!stickytooltip.isdocked){
     stickytooltip.positiontooltip($, $tooltip, e)
    }
   })
   $tooltip.bind("mouseenter", function(){
    stickytooltip.hidebox($, $tooltip)
   })
   $tooltip.bind("click", function(e){
    e.stopPropagation()
   })
   $(this).bind("click", function(e){
    if (e.button==0){
     stickytooltip.isdocked=false
     stickytooltip.hidebox($, $tooltip)
    }
   })
   $(this).bind("contextmenu", function(e){
    if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
     stickytooltip.docktooltip($, $tooltip, e)
     return false
    }
   })
   $(this).bind('keypress', function(e){
    var keyunicode=e.charCode || e.keyCode
    if (keyunicode==115){ //if "s" key was pressed
     stickytooltip.docktooltip($, $tooltip, e)
    }
   })
  }) //end dom ready
 }
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")
//]]>
</script>

Langkah Kedua:
Copy kode html Tooltip berikut definisinya, dimanapun anda ingin memasang Tooltip tersebut, seperti posting dan lain sebagainya...

Kode html Tooltip

<p>Some page contents here...</p>

<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>

<p>Some page contents here...</p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">

<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip"  style="width:262px">
<img src="http://vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

<div id="sticky3" class="atip">
<img src="http://redleaveslarge.jpg" />
</div>

</div>

<div class="stickystatus"></div>
</div>

sumber: dynamicdrive