Home / Free JavaScripts / Mouse Cursor effects / Here

Cut & Paste Inline HTML Tooltip script

Credit: JavaScript Kit

Description: Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window's edges.

Example (move mouse over links): "RSS 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 RSS Ajax Ticker, or through Google Feeds API, explained in the article Displaying RSS feeds easily using Google Ajax Feed API."

RSS stands for Really Simple Syndication, and is a type of XML file format.
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.
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.


Step 1: Insert the below into the <head> section of your page:

The code above references two external .js files. Download them below:

Step 2: Add the below sample HTML code to the BODY of your page:

More details

To add an inline HTML tooltip to any link on your page, just give the link a rel="htmltooltip" declaration, then define the tooltip DIV itself anywhere on the page with class="htmltooltip":

<a href="#" rel="htmltooltip">Some link</a>

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

The tooltip DIV can be defined anywhere on the page, and not necessarily directly below the anchor link. So how does the script know which anchor the tooltip should belong to? It matches up the two based on the order in which they appear within the page's source, so the 4th tooltip DIV will be associated with the 4th anchor link on the page, wherever both may appear on the page.

JavaScript Tools:
Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info