foxitip 0.1

Demo

List 1

List 2

List 3

List 4

Discover different tooltips on links wich are always inside the window.

Share/Save/Bookmark

Description

Damn small and easy program for nice tooltips staying inside the viewable window. You can use different styles on one site. It is designed to be easily integrated and just working fine.

This program is under GNU General Public License v3. It was developed with jquery 1.3.2 but works from 1.2.5.

Actually the minified program is only 1.7 kB in size (gzipped 813 Bytes)! Last updated on 19th August 2009.

Using

Include the stylesheet, jquery-library and the plugin into the head.

<link rel="stylesheet" type="text/css" href="jquery-foxitip-0.1.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-foxitip-0.1.min.js"></script>

Inside the body you have your link just like this.

<a href="site1.html">site1</a>

Now inside the head or body you link the main function to your link.

<script type="text/javascript">
$(document).ready(function(){
  $('a').foxitip();
});
</script>

This is it! Automatically a tooltip is build with the linktext as title and its url underneath.

Other possibilities are ...

$('a#first').foxitip();
$('a#second').foxitip({className:'funny',url:false});

// in the body
<a href="site1.html" id="first" rel="#specialtip">site1</a>
<div id="specialtip" style="display:none;position:absolute">
<p>This might be a special tooltip with a picture.</p>
<img src="special_picture.jpg" alt="special" width="100" height="100" /></div>

<a href="site2.html" id="second" title="Very funny title">site2</a>

An extern tooltip is used in the first example by setting the 'rel' attribut to its id including '#'.
The second example shows only the title wich is written inside the 'a' tag with an extra class.

Properties

property default description
title true If true, the title will be shown in the tooltip. Allowed is true or false.
url true If true, the url will be shown in the tooltip. Allowed is true or false.
offsetX 15 The right distance in pixel between the left top corner of the tooltip and the pointer position.
offsetY 18 The down distance in pixel between the left top corner of the tooltip and the pointer position.
className 'foxitip' Classname for each tooltip.
callback   You can combine this plugin with other functions.

Download

If you use my program please be so fair to !

foxitip 0.1 full
jquery-foxitip-0.1.js, jquery-foxitip-0.1.css, license-gpl-3.0.txt

foxitip 0.1 minified
jquery-foxitip-0.1.min.js, jquery-foxitip-0.1.css, license-gpl-3.0.txt

package of foxitip 0.1 full, minified and this documentation
jquery-foxitip-0.1.js, jquery-foxitip-0.1.min.js, jquery-1.3.2.min.js, jquery-foxitip-0.1.css, documentation.html, license-gpl-3.0.txt

The latest version of jquery you will get on jquery.com.

Don't miss

Check out my other small and easy programs!

foxibox
Nice image gallery. Very easy to use.

foxislide
Nice image rising effect. Very easy to use.

foxiblob
Lavalamp effect on menus. You can even use different styles on one site. So easy to use.

foxiballoon
Objects following your vertical scrolling like a balloon. Very easy to use.

foxicols
Equal height columns made easy.