Title Tips

Pretty output of HTML title attribute values on mouse events that can be easily added to pre-existing elements.

Features

Extensible HTML/CSS interface.
Compatible with Firefox 3.6+, Chrome, Safari 5+, Opera, and Internet Explorer 7+ web browsers.
Easy to set-up and customize.
Supports multiple instances on a single document.

Check out the demo provided with this package.

Installation

Download the latest sources to your computer using a web browser.
Extract the contents of the .zip into a folder on your local computer.
Upload the folder with the following files to your web site.

Filename	Role
title-tips.min.js	The main script to be included from within your HTML document.
title-tips.min.css	This style sheet that defines the "look & feel" of the speech bubble.

Set-up

The way this script works is fairly simple. By defining your parent element #container using the jQuery selector as describe below, all child elements containing the title attribute will be overridden with the new content output format.

Source Code

Add the following Javascript between the <head></head> tags of your HTML document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="/path/to/title-tips.min.css">

<script src="/path/to/title-tips.min.js"></script>
<script>
$(document).ready(function() {
  $('#container').TitleTips();
});
</script>

Plug-in Settings

The following options can be passed to the plug-in main function as JSON

Option	Description	Default Value
alignPos	position relative to the trigger element	right
animEasing	animation to be used when viewing the content	linear
animSpeed	speed of the animation in milliseconds	600
eventType	mouse event to bind to the trigger element	click

Click here for more information about the available jQuery UI Easing effects.

Event Bubbling Issues

In cases where trigger elements are close together, and mouseover has been defined as the eventType, you will likely experience bubbling issues. To avoid this, use the mouseenter event as a substitute.

PNG Animation Issues

Due to the lack of support for PNG's containing alpha-transparency in Microsoft products, the animation fadeIn/Out effects for content output elements on Internet Explorer 7 & 8 web browsers has been disabled by default.

Releases

I have included with this package a packed version (2.11 kB) and developers version (unpacked 4.8 kB)

You can always find the latest updates within this projects repository.

Code Repository

This projects repository is currently hosted on Github

https://github.com/nuxy/Title-Tips

Maintainer

For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info

License and Warranty

This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.

Title Tips is provided under the terms of the MIT license.