Pretty output of HTML title attribute values on mouse events that can be easily added to pre-existing elements.
Check out the demo provided with this package.
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. |
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.
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>
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.
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.
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.
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.
This projects repository is currently hosted on Github
https://github.com/nuxy/Title-Tips
For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info
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.
Title Tips ©2011-2015 Marc S. Brooks