Cara Membuat Inline HTML Tooltip

Inline HTML Tooltip adalah sebuah tooltips yang memungkinkan anda menentukan kreasi dengan menanamnya langsung didalam halaman website anda. Tooltip terlihat saat mouse digulirkan diatas link. Tooltip akan muncul tepat dibawah anchor link tersebut dan dapat mengatur posisinya secara dinamis, berdasarkan tepi terdekat jendela window anda.

Contoh:

(Letakan cursor pada Link...)

Cara Memasang Inline HTML Tooltip

Langkah Pertama:

Copy tiga kode Script berikut ini diatas kode </head>; jquery-1.2.2.pack.js, htmltooltip.js dan htmltooltip css:

<script src='https://sites.google.com/site/archivesiugi/javascr/jquery-1.2.2.pack.js' type='text/javascript'/></script>

<style type='text/css'>

div.htmltooltip{
position: absolute; /*leave this and next 3 values alone*/
z-index: 1000;
left: -1000px;
top: -1000px;
background: #272727;
border: 10px solid black;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
}

</style>

<script src='https://sites.google.com/site/archivesiugi/javascr/htmltooltip.js' type='text/javascript'/></script>

Langkah Kedua:

Copy contoh kode HTML berikut ini dimanapun anda ingin memasang Inline HTML Tooltip pada halaman anda.

<p align="left">"<a href="http://en.wikipedia.org/wiki/RSS_(file_format)" rel="htmltooltip">RSS</a> is a popular format for pushing updated headlines and contents from a site to viewers. JavaScript can be used to show RSS content on your site, whether by hosting the feed yourself as seen in <a href="http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml" rel="htmltooltip">RSS 
Ajax Ticker</a>, or through Google Feeds API, explained in the article <a href="http://www.javascriptkit.com/dhtmltutors/googleajaxfeed.shtml" rel="htmltooltip"> Displaying RSS feeds easily using Google Ajax Feed API</a>."</p>

<!--Inline HTML Tooltips (DIV with class="htmltooltip"-->
<!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source-->

<div class="htmltooltip">RSS stands for Really Simple Syndication, and is a type of XML file format.
</div>

<div class="htmltooltip">In this tutorial, see how to use JavaScript and PHP to create a live RSS ticker that taps into any RSS feed on the web.
</div>

<div class="htmltooltip">In this tutorial, we show you how to use Google Ajax Feed API to display RSS feeds from other sites on your own easily and without hosting the files on your own server.
</div>

Keterangan:

Untuk memasang Inline HTML Tooltip untuk setiap link pada halaman Anda, cukup dengan memberikan link A rel="htmltooltip", kemudian tentukan DIV tooltip(isi tooltip)tersendiri di manapun pada halaman anda dengan menambahkan class="htmltooltip".

Contoh:

<a href="http://caprt3a.blogspot.com" rel="htmltooltip">Contoh:</a>
<div class="htmltooltip">RSS singkatan dari Really Simple Syndication, dan merupakan jenis format file XML.</div>

Keterangan:

DIV Tooltip tidak harus berada dibawah Link anchor, artinya DIV tooltip dapat dipasang terpisah dimanapun pada halaman anda karena DIV Tooltip dapat didefinisikan walau dipasang dimanapun pada halaman anda .

sumber: javascriptkit