HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering. This is foremost intended for <a> tags residing within full-width elements, such as headings or list entries. Amongst several options, it is possible to choose any attribute (href by default, see Usage) of a given tag. The functionality is implemented like:
$("h2 a").hoverAttribute();
HoverAttribute includes and uses the function parseUri() by Steven Levithan. It is licensed under the MIT License.
Latest update: 1.0.7
mailto:will be removed when removing protocol from URL's.- Fixed bug that was wrapping the attribute title causing line breaks in Firefox.
Download
Download demo files
Download script v1.0.7
Minified version (smaller file size)
Downloaded num_downloads times.
Examples
1. Regular heading link (hover this link)
The first default example shows the href attribute on hovering. It highlights the domain (or host) and sets a maximum amount of non-wrapped characters to 60, where wrapping will occur at the end of the URL.
$("h3.demo-heading-1 a").hoverAttribute();
2. Check out my websites
This example also shows the href-attribute, but with some different properties. Here we highlight the last part of the URI and remove the protocol (namely the http://, https:// or ftp://).
$("h3.demo-heading-2 a").hoverAttribute({ removeProtocol: true, removeWWW: true, highlightURLPart: "lastURIPart" });
3. Go to "jQuery plugin" Google search result
Here we highlight the querystring of a Google search URL and wrap the beginning of it.
$("h3.demo-heading-3 a").hoverAttribute({ wrapLength: 65, wrapLink: "before", highlightURLPart: "query", });
4. The Moposite
Finally we have a simple example, where the title attribute is shown on hovering and the attribute is animated into position from the bottom.
$("h3.demo-heading-4 a").hoverAttribute({ attribute: "title", tweenInFrom: "bottom", });
Usage
The HoverAttribute plugin takes some options as follows:
$(".selector").hoverAttribute({ attribute: "href", animationTime: 0.3, animationEase: "linear", tweenInFrom: "left", parseAsURL: null, removeProtocol: true, removeWWW: false, wrapLink: "after", wrapLength: 60, highlightURLPart: "host", cssSettings: { canExpandFullWidth: true } });
Options
attribute
A string that sets which attribute to show on hovering. Any existing attribute may be used. The default is set to "href".
animationTime
Time time in seconds that the animation on hover should last. Default is set to 0.3.
animationEase
The jQuery easing function that the animation will use.
"swing" (Default)
"linear"
tweenInFrom
The side from which the attribute will be animated into position.
"left" (Default)
"top"
"right"
"bottom"
parseAsURL
If set to true, it forces the chosen attribute to be treated as a URL. If set to false, no parsing of the URL will be done.
null (Default)
true
false
removeProtocol
Whether to remove "http(s)://", "ftp://" or "mailto:" in the selected attribute, if this is a URL.
false (Default)
true
removeWWW
Whether to include "www." in the selected attribute if this is a URL.
false (Default)
true
wrapLink
A string indicating if and where to wrap the attribute's text.
"after" (Default)
"none"
"middle"
"before"
wrapLength
An integer or string that sets the maximum number of characters (before adding "...") in the attribute content. If an int is given, that is the number of maximum characters. If set to "auto" the number of characters will be set to the actual length of the attribute value minus 3 (the length of "..."), else if set to "none" or 0 no maximum is set and used. Default is set to 60.
60 (Default)
Any positive integer
"auto"
"none"
highlightURLPart
A string that instructs which part of the URL (if the string is a URL) to highlight.
"host" or "domain" (Default)
"path"
"query"
"lastURIPart"
"none"
cssSettings
A set of properties to correct and/or control the appearance of the chosen element.
cssSettings.canExpandToFullWidth
Sets whether or not the chosen element can be expanded to 100% width within it's parent element when hovered.
true (Default)
false
Releases
| Version | Date | Size | Release notes |
|---|---|---|---|
| 1.0.7 | May 20th, 2010 | 9 kB | mailto: will be removed when removing protocol from URL's.Fixed bug that was wrapping the attribute title causing line breaks in Firefox. |
| 1.0.6 | May 5th, 2010 | 9 kB | Added possibility to choose from what side the attribute will be pop up from. (tweenInFrom).https:// and ftp:// will now be removed when removing protocol.Added possibility to force the attribute to be or not be parsed as a URL ( parseAsURL). |
| 1.0.5 | Apr 29th, 2010 | 9 kB | Added animation properties, fixed bug regarding attribute container width and height and refined code and comments. |
| 1.0 | Apr 19th, 2010 | 7 kB | - |
Feedback & development
This plugin is developed by Alexander Wallin at afEkenholm Web Design. For further development, suggestions and/or nasty complaints, please post a comment below or write to contact@afekenholm.se.
You can also visit the jQuery Project site.
Whoa, this is great! Thanks a lot!
Reply
Great idea, I like the effect very much!
Reply
Very nice effect indeed, very nice way to provide information about a link before following it!
Reply
May 4th, 2010 at 17:34
Thank you!
Yes, that is actually the main concept, whereas the animation is a slick bonus.
Reply
Dude, that’s awesome. Almost fall off my chair.
Reply
Wow… dude… that is really cool!!
Reply
My immediate thought went to long strings – wondering what the plugin would do and how I might handle them. I’m really glad you thought about this enough to include the “canExpandToFullWidth” property – AND that you included the Google URL example.
With all the META we need to show on some elements, this example is much more elegant that just a tooltip. I’m dying to see how this is received in the accessibility community.
Great work!
Reply
May 4th, 2010 at 18:44
Hey Jason!
I’m really glad you like it! I never dreamt of a response of this magnitude.
I have some ideas about alternate scenarios; when the tag is within a text for instance. As you said, descriptions and such can get pretty darn long.
Reply
Skitsnyggt – shit thats nice!
/ R
Reply
Very nice one.
Would use it on a commercial project I am working on right now, if it is allowed
Reply
May 4th, 2010 at 21:47
Please do! Sent me a note when it’s up and running so that I can have a look.
Reply
Is it possible to make it work with joomla?
Reply
May 5th, 2010 at 04:41
Anything is possible
Reply
May 5th, 2010 at 09:17
Yes, jQuery is fully independent from CMS platforms.
Reply
What would happen with the ftp:// protocol?
Reply
May 5th, 2010 at 09:25
Right now there’s no way the remove “ftp://” from a URL. Thanks for commenting, though.
I don’t see the usage of “ftp://” in a link-element (for instance) as something worth while, but please convince me if I’m wrong!
Reply
May 6th, 2010 at 02:03
True, you’re right!, only remarked to report on my blog. Great plugin by the way.
Reply
Wow! Very nice. Cooooool!
Reply
But it doesn’t work in IE.
Why develop a plugin that doesn’t work for the world’s most used browser?
Reply
May 5th, 2010 at 12:40
It works fine in IE8, which reaches 79.9% in compatibility (Firefox has 46.4% of the market whilst IE6-8 has 33.4%).
http://www.w3schools.com/browsers/browsers_stats.asp
I’ll see what I can do about IE6 & IE7. Thanks for posting!
Reply
May 5th, 2010 at 13:10
Found it. A comma too much in the post-specific code caused an error in IE6-7, but now it should be all right.
Reply
August 25th, 2010 at 23:59
Hi,
please specify how u fixed it for IE7. It works fine in FF and IE8. Thanks
my code:
$(function(){
$(“ul li a.newsList”).hoverAttribute({
attribute: “rel”,
removeWWW: true,
highlightURLPart: “domain”,//”lastURIPart”
cssSettings: {
canExpandFullWidth: false
}
});
});
Reply
August 26th, 2010 at 00:35
I get the error – Object doesnt support this property or method in IE7 only.
I laos tried
highlightURLPart: “domain”//”lastURIPart” – omitting comma
I also tried these doctypes
and
Reply
Very nice jQuery-Plugin Alexander, thx for sharing!!!
Reply
Works perfectly in FF3.6 and IE8. Compatibility is enough for general audience. Thanks for your work.
Reply
aw aw aw … :-bd
thanks a lot Mr Alexander Wallin
i like it ^^
Reply
May 6th, 2010 at 06:06
hmmm…little confuse use it on blogspot…
Reply
May 6th, 2010 at 08:18
Thanks Beben! I’m sorry, what is confusing?
Reply
May 6th, 2010 at 12:44
i’ll add jquery.hoverattribute.js under tag “head”…and
i put HoverAttribute plugin on my body…so
I was a little less understanding in writing for a link?
Sorry my english bad…hihihihi
Reply
You need more jquery on this page. -1 for not enough jquery animation.
Reply
Riktigt snyggt! Och helt oväntat. Kreativt!
Reply
Very nice feature Alex! Gr8 job!
Reply
Nice effect. Also I love your web theme!
Reply
May 7th, 2010 at 23:36
Thank you Rubens!
Reply
Don’t use this too much though! It’ll be like overkill.
Reply
May 7th, 2010 at 23:35
I totally agree; this is not an every-link plugin.
Reply
Love this plugin! It has tremendous value from a usability (and coolness) factor!
Reply
May 10th, 2010 at 04:33
Thank you Adam! Dig your site.
Reply
Woww this is Awesome
Reply
cool plugin
Reply
Is great !! I love JQuery, and I think JQuery is the future of the web right now !
Reply
Nice effect! love it and will play with it now. Thanks for sharing
Reply
Hello,
I made a short article about your plugin on my french blog : http://www.tempo-bamako.ch. It will be published on 14.05.2010.
Good job and best regards.
Jean Tinguely Awais.
Reply
wow it’s a very cool effect!
Reply
Very cool effect. This is very creative and I love it.
Although for a commercial website I don’t have any idea how to use it while adding value. It sould seem a little superflous for a commercial website.
Reply
May 14th, 2010 at 12:31
I’m glad you like it! Sure, the effect is not suited for all situations. If it works, it works!
Reply
Cool effect, but a shame it’s only really usable when the link is on a new line… it would be great if you could modify it so that it worked for links within paragraphs, constraining the width of the attribute that is shown to the width of the link text is is replacing, and scrolling the full length of the attribute back & forth within the space, a bit like the old IE MARQUEE effect? (This would probably work best with sliding the attribute up or down into view.)
Reply
May 14th, 2010 at 12:43
I thought so too when I released the first version. However, I have become pretty reluctant to see this effect as a standard effect on links.
Actually, I’ve got an unfinished plugin for the MARQUEE-style. We’ll see what happens.
Reply
PS – you already support removing the protocol for http:// and ftp:// but why not mailto: as well? Surely that would be very useful?!
Reply
May 14th, 2010 at 12:32
Good point! I’ll take that into account!
Reply
May 20th, 2010 at 14:45
This will be fixed in the next release. Thanks for the feedback!
Reply
Wow! this is brilliant.
Reply
hey there,
looks nice, but the code is to much for practice webpages…
but, nice work
Reply
hi first of all thanks for this plugin is very nice… but i’ve got a problem look at this… how can fix ?
http://i47.tinypic.com/2ev7m2f.jpg
Reply
May 19th, 2010 at 13:41
You must ensure that the
<a>tag resides within a full-width element. You can’t, for instance, put it in i a<span>tag with auto-width.Try using
display: blockorwidth: 100%(if that suits your markup).Reply
Very nice effect! And your blog is very beautiful, too. Thank you very much for this plugin.
Reply
i am understand…;)
Reply
i am understand…hehehehe
Reply
Wow very smooth animations. thanks for sharing!
Reply
Good mindset!!! you are very awesome!!! Thanks for your post!! I love it!!! ☺
Reply
It’s an awesome plugin for Jquery, thank you for your work
Reply
Another ELLIS fan! I think I’m the first person to catch the ELLISMANIA link in your Demo. I LOVE Ellis!!
The guy makes me laugh everyday on the way home from work. don’t know what I’d do without his show everyday.
btw, SWEET effect. I like the smooth transitions.
Reply
July 16th, 2010 at 13:34
Thank you, Carbonfibre!
I’m sorry to disappoint you, but it’s Elastomania, a 2D motocross game from 2000.
Reply
Very nice! I have use it in my blog.^_^
And now, I am going to write a chinese version of this jQuery plugin tutorial to share with people in China. Hope you can write more useful plugins!!
Reply
July 16th, 2010 at 13:32
Sounds like a great idea, Joyce. When you are done, you can always send it to me so that I can post it on jQuery’s plugin site.
Reply
very interesting…Hope you can write more useful plugins!!
Reply
I am forwading this blog post to my friends. Exceptional work!
Reply
This simply ROX ! Just oozing w JQuery Awesumness !
Kudos to you Alexander ✌
Reply
Awesome man, i will share it. i havnt seen hover effect like this… o wait why dont you add Sshare buttons on your blog?
Reply
August 1st, 2010 at 10:48
Thanks! At the moment, I have sharelinks to Facebook and Twitter right under the main heading.
Reply
Toppenblogg detta. Skall bokmärkas!
Reply
Hello.
Thanks for this unbelievable feature, it’s really what i’m dreaming to see.
But there is a problem with the plugin in IE. the texts not looking right, it’s like to be scattered when adding the script
$(document).ready(
function(){
$(‘ul.nav li a’).hoverAttribute({
attribute: ‘rel’,
animationTime: 0.3,
tweenInFrom: ‘bottom’
});
});
I found this problem in IE8, I didn’t tried it in other IE versions.
I hope you help me with this.
Reply
Nice work you did there with the plugin. I think it’s really hard to come up with an original plugin these days but you manages to build something quite handy. I’ll try to squeeze it in in the project I’m working on. Keep on the good work!
Reply
I am working to redesign my website ! and really i like your plugin !
I dont really need it for my site …. But he is so nice i think i will find a way to use it for something
(pass to see it in about 1 month) if its always in grey color.. its the old style wait a little more
Reply
Hey, something is wrong with your site in Opera, you should check into it.
Reply
hi there,
i used it for a friend of mine, check it, it can be used also for the links in the names in the comments area , sweet ! thx
Reply
December 8th, 2010 at 10:54
Indeed!
Reply
nice vice bice
Reply
AWESOME script, however the tags conflict with another scriptI have… is there a way to modify it so it won’t conflict? I’ve tried other variables but that doesn’t work.
Thanks much for any help!
Cheers!
Reply
February 10th, 2011 at 01:06
Thanks Brian! Can you figure out which tags are in conflict?
Reply
Several of these replies on this post are garbage, You should delete them.
Reply
October 5th, 2011 at 21:16
Including yours.
Reply
I do consider all the ideas you have presented in your post. They’re really convincing and will certainly work. Nonetheless, the posts are very short for novices. May you please extend them a bit from next time? Thanks for the post.
Reply
what’s up furthermore there, i recently found your webblog for hotmail, together with i want to share that you choose to generate perhaps surprisingly effectively with the aid of a web webpages. my group is actually amazed by way of the method that you publish, as well as the subject matter is extremely good. anyway, i’d personally like so that you can happy about the breakup regardless of whether you intend to swap backlinks using your web log? i am to the great extent than able to reciprocate and hang your main backlink down with the link exchange spot. waiting on your solution, i’d prefer to share a understand and gooday!
Reply