Last week I found myself a UX problem that I wanted to solve in a centralized way. It was the controlling of the tittle attribute on links and buttons. A browser renders a small box on the placed on the location of the mouse pointer and renders the title attribute content inside of that box. Although this is a browser standard in my application I needed something better. I needed better control over positioning of the text-box and better control over appearance time and effect. A side-effect of this was that I also had control over the styling of that text-box.
My solution for the problem was a new lightweight jQuery plugin!
Why another plugin?
Well, I wanted a lightweight script that I could use on large groups of links and buttons. To make that easy I wanted to use jQuery as the selector and extend jQuery. How to do that… a jQuery plugin! So I created one.
One could argue that there are more then enough plugins out there that do the same… Well, they do what I want and a lot of other stuff. I wanted a lightweight solution, not a title loaded with AJAX, not a title-box with a header and markup. I wanted just a box!
Currently the functionality goes as far as replacing the title by a new element inside the original one. So, If you have a link tag a new tag will be added inside that link. The new tag is configurable as is the class that tag gets for styling. It is also possible to adjust x and y position from the centered position below the original object. Note that the position of the box is adjusted at the screen edge to prevent if from falling outside of the window. The arrow image will keep centered on a change of horizontal position.
The plugin has been tested on a Windows 7 machine with the browsers:
- Firefox 3.0+
- IE 8 (IE 8 mode)
- Chrome 5+
- Opera 10.0+
go to the project page for the demo.
Release 0.1 ALPHA
This is a version 0.1 release so do not expect it to be perfect. Like I wrote in the Support section it has not been battle tested yet in all browsers on different operating systems. That is not the only problem, it is not stable code. Is is fragile and is not properly shaped. For me to get it out of APLHA and into BETA I hope to get some help from the jQuery community. But currently I am not determined to push this plugin to a 1.0 release.
I would like to see this plugin pushed to a stable 1.0 release. Before this can happen it should be made more stable and it should be better configurable. It’s still a piece of fragile code and should undergo some refactoring. Also it’s not really generic as it always aligns below center (including the arrow image). Here a couple of TODO lists for different releases.
ready for 0.x BETA:
- basic refactoring
ready for 1.0:
- image position config
- box position config