miniTip jQuery Plugin

James Simpson -

I discovered the wonder that is jQuery during my development of Leet Media, and I have decided to convert all of the sites under the GoldFire Studios umbrella to use jQuery instead of Prototype. However, I've been using Prototip on both BC Wars and PokerRPG, which as the name suggests only works with Prototype.

While jQuery has many tooltip plugins (including the very nice Tipped, a newer version of Prototip for jQuery), none seemed to quite meet the needs of my own projects. Many are one-size-fits-all solutions that are too bulky (Tipped has many great features, but tops out at 112kb with all components included), and still otheres are too light, not offering functionality like click triggering or other advanced options. Because of this I decided to make my own solution with a few goals in mind.

First and foremost, it had to have a small footprint. The goal was for it to be less than 5kb, and miniTip beat this by coming in at just 4kb! I also wanted to avoid using any images, make it extremely easy to style and setup, and to still have a good set of features that made it a powerful tooltip plugin. I am happy to say miniTip has met and exceeded all of those goals! Since I also jumped on the Git bandwagon with Leet Media, I decided to make use of my new GitHub account and turn miniTip into my first open-source project.

Features

  • JS + CSS is just 4.5kb minified (1.7kb gzipped)!
  • Uses no images
  • Automatically stays within viewport
  • Automatic support for image maps
  • Extremely easy to customize and setup
  • Use text or HTML from title tag, hidden element, or JS declaration
  • Fade in/out animations
  • Set custom delay for show/hide
  • Specify default anchor position
  • Option to set a persistent tooltip that only closes when mouse moves off of tooltip and anchor element
  • Support for hover and click events
  • Click-event tooltips actually behave as expected, only going away when you click outside of the tooltip
  • Optional title bar support (see examples)
  • Tested in: IE7+, Firefox 3.5+, Safari 3+, Chrome, Opera 10+
  • Even more can be found in the options below

Examples

This is the most basic usage. It displays a miniTip on mouseover of the element with ID "tip" and content of the title tag (maximum width of 250px). Mouseout of the "tip" hides the miniTip (obviously you need jQuery included in your page before this). Hover to view this example.

$(function(){
	$('#tip').miniTip();
});

Here is an example with some options added. This will pull content from the "title" tag of #tip, will display a title bar with text "Example Title," will default to a tooltip on the right side of the anchor element, will be activated by click, and will display an alert when the tooltip is shown. Click to view this example.

$(function(){
	$('#tip').miniTip({
		title: 'Example Title',
		anchor: 'e',
		event: 'click',
		show: function(){ alert('Hello, World!'); }
	});
});

Here is an example of what the HTML for the above example could look like (can be used on virtually any element):

<div id='tip' title='This is example tip content.'>Hover over me!</div>

Options

  • title: string ('' by default) Leave blank to hide title bar, enter text/html to display in title bar.
  • content: string/pointer (false by default) Omit to pull content from title tag. Enter text/html to display as the tooltip's content. Also works from hidden div's by doing $('#div').html() or similar.
  • delay: number (300 by default) The amount of time in milliseconds that the tooltip waits to display and hide.
  • anchor: string ('n' by default) The default location of the tooltip. Can by 'n' (top), 's' (bottom), 'e' (right) or 'w' (left).
  • event: string ('hover' by default) What event triggers the tooltip. Can by 'hover' or 'click.'
  • fadeIn: number (200 by default) The speed of the fade in animation in milliseconds.
  • fadeOut: number (200 by default) The speed of the fade out animation in milliseconds.
  • aHide: boolean (true by default) Set to false to prevent the tooltip from hiding until the mouse moves off of the anchor and the tooltip.
  • maxW: string ('250px' by default) The maximum width of the tooltip.
  • offset: number (5 by default) The offset in pixels between the stem and the anchor element.
  • stemOff: number (0 by default) X-axis offset of stem, set to value of border-radius to adjust for viewport correction.
  • show: callback function Custom function to be called when the tooltip is shown.
  • hide: callback function Custom function to be called when the tooltip is hidden.
  • render: callback function Custom function to be called when the tooltip is rendered.

$(function(){ hljs.initHighlightingOnLoad(); $('#ex1').miniTip(); $('#ex2').miniTip({ title: 'Example Title', anchor: 'e', event: 'click', show: function(){ alert('Hello, World!'); } }); });