« »

With this JavaScript code, annotations are embedded directly inside your webpage and will appear along with fading effects whenever users move mouse over the link. Fading inline Rich HTML Tooltip lets your tooltips appear immediately below links and you can use HTML tags for tooltips.

Label: fading, inline, rich HTML, HTML tooltip, Inline HTML Tooltip, annotation, fading effect, mouse over,

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<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>

Copy All x2

<script type="text/javascript" src="jquery-1.2.2.js"></script>

<script type="text/javascript" src="htmltooltip.js">

/***********************************************
* Inline HTML Tooltip script- by JavaScript Kit (http://www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>

Copy All x2

<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>