jQuery plugin: titleControl

What?

A jQuery Plugin to replace the browsers interpretation of the title element. This allows you to control hover animation, speed, style and placement.

Why?

If you want more control over the placement, interaction and styling of the title attribute you can use this plugin. Ideally used for buttons and link that need more explenation then just the content.

How?

The title attibure of the parced object will be replaced by a configurable tag inside of that object. The title will be removed and CSS and some jQuery magic will take care of styling and placement.

Please note that this plugin is in BETA 0.2 release.

Download

The latest release download can be found on the jquery plugin page hosted on plugin.jquery.com

Suport

Currently the plugin has been tested for:

Demo

Normally an element with a title is rendered by the browser in a certain way. This does not always work as required in all cases.

This is what the browser rendering looks like:

this is what it looks after the plugin is used:

Note that the titleControl plugin speeded up the interaction to direct showing. It also not clears the described object, the title attibute can fall over the object. Last but not least it is styled so that it matches the origional object, this includes a small image that makes it seem like it is a text bubble.

basic use

basic use requires a image to be placed in your domain at /images/transparent.gif. It is called like that because I use a sprite (resuces the amount of images that need to be called thereby reducing traffic load) to place the bubble arrow in its spot.

the code should look like:

<script type="text/javascript"> $(object).titleControl(); </script>

options

Options can be entered as a hash. Default options are always avaliable but acn be overwitten by the hash elements. Just a list of all the possible options:

childTag
this string can be changed into a different kind of tag if needed. default is the <span> tag.
childClass
this string is used as the class attibute for the childTag. can be changed for other styling across the page.
yDistance
integer to set the y distance of the new element to the origional element. can also be a minus number and used to hover things above the origional object. NOTE that that use is a hack and NOT STABLE!
xDistance
integer to set the x distance offset from the middle of the origional object. currently not very usefull as the horizontal axes are not functional at this point.
imageInclude
boolean to set if an image is included in the new child. this is used for styling of the bubble image.
imageUrl
string to set the url of the image that is included.

The call for the titleControl with a hash included should look something like this.

<script type="text/javascript"> $(object).titleControl({ childClass: 'customClass',
imageUrl: '../my/image.gif',
yDistance: 20
});
</script>

Getting help

currently I'm looking for people to help development on this plugin. I have not made a large tutorial and not a complete downloadable pack. For now you can look at how this page is made.