HoverAttribute jQuery plugin

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.

134 comments

  1. Matto says:

    Whoa, this is great! Thanks a lot!

  2. Way says:

    Great idea, I like the effect very much!

  3. Very nice effect indeed, very nice way to provide information about a link before following it!

    Alexander Wallin Reply:

    Thank you!
    Yes, that is actually the main concept, whereas the animation is a slick bonus. :)

  4. Dude, that’s awesome. Almost fall off my chair.

  5. Bruce says:

    Wow… dude… that is really cool!!

  6. Jason says:

    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!

    Alexander Wallin Reply:

    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.

  7. Rolle says:

    Skitsnyggt – shit thats nice! :)

    / R

  8. Michael Pehl says:

    Very nice one.

    Would use it on a commercial project I am working on right now, if it is allowed ;-)

    Alexander Wallin Reply:

    Please do! Sent me a note when it’s up and running so that I can have a look. :)

  9. Tina says:

    Is it possible to make it work with joomla?

    André[Inu] Reply:

    Anything is possible

    Alexander Wallin Reply:

    Yes, jQuery is fully independent from CMS platforms.

  10. André[Inu] says:

    What would happen with the ftp:// protocol?

    Alexander Wallin Reply:

    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!

    André[Inu] Reply:

    True, you’re right!, only remarked to report on my blog. Great plugin by the way.

  11. kruz says:

    Wow! Very nice. Cooooool! :-)

  12. Dan says:

    But it doesn’t work in IE.

    Why develop a plugin that doesn’t work for the world’s most used browser?

    Alexander Wallin Reply:

    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!

    Alexander Wallin Reply:

    Found it. A comma too much in the post-specific code caused an error in IE6-7, but now it should be all right.

    Howie Reply:

    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
    }
    });

    });

    Howie Reply:

    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

  13. Very nice jQuery-Plugin Alexander, thx for sharing!!!

  14. cvul says:

    Works perfectly in FF3.6 and IE8. Compatibility is enough for general audience. Thanks for your work.

  15. Beben says:

    aw aw aw … :-bd
    thanks a lot Mr Alexander Wallin
    i like it ^^

    Beben Reply:

    hmmm…little confuse use it on blogspot…

    Alexander Wallin Reply:

    Thanks Beben! I’m sorry, what is confusing?

    Beben Reply:

    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

  16. Werry Togan says:

    You need more jquery on this page. -1 for not enough jquery animation.

  17. Frank says:

    Riktigt snyggt! Och helt oväntat. Kreativt!

  18. Very nice feature Alex! Gr8 job!

  19. Nice effect. Also I love your web theme!

    Alexander Wallin Reply:

    Thank you Rubens!

  20. Tony says:

    Don’t use this too much though! It’ll be like overkill.

    Alexander Wallin Reply:

    I totally agree; this is not an every-link plugin.

  21. Love this plugin! It has tremendous value from a usability (and coolness) factor!

    Alexander Wallin Reply:

    Thank you Adam! Dig your site.

  22. Woww this is Awesome :)

  23. nessroman says:

    Is great !! I love JQuery, and I think JQuery is the future of the web right now !

  24. fedmich says:

    Nice effect! love it and will play with it now. Thanks for sharing :)

  25. tempobamako says:

    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.

  26. kvision says:

    wow it’s a very cool effect!

  27. Steven says:

    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.

    Alexander Wallin Reply:

    I’m glad you like it! Sure, the effect is not suited for all situations. If it works, it works!

  28. 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.)

    Alexander Wallin Reply:

    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.

  29. PS – you already support removing the protocol for http:// and ftp:// but why not mailto: as well? Surely that would be very useful?!

    Alexander Wallin Reply:

    Good point! I’ll take that into account!

    Alexander Wallin Reply:

    This will be fixed in the next release. Thanks for the feedback!

  30. Viki Pandit says:

    Wow! this is brilliant.

  31. thom says:

    hey there,
    looks nice, but the code is to much for practice webpages…

    but, nice work

  32. alex says:

    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

    Alexander Wallin Reply:

    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: block or width: 100% (if that suits your markup).

  33. Very nice effect! And your blog is very beautiful, too. Thank you very much for this plugin.

  34. Beben says:

    i am understand…;)

  35. Beben says:

    i am understand…hehehehe ;)

  36. AJ says:

    Wow very smooth animations. thanks for sharing!

  37. Good mindset!!! you are very awesome!!! Thanks for your post!! I love it!!! ☺

  38. Jennifer R says:

    It’s an awesome plugin for Jquery, thank you for your work

  39. CarbonFibre! says:

    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.

    Alexander Wallin Reply:

    Thank you, Carbonfibre!

    I’m sorry to disappoint you, but it’s Elastomania, a 2D motocross game from 2000. :D

  40. Joyce says:

    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!!

    Alexander Wallin Reply:

    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.

  41. MOPVHS says:

    very interesting…Hope you can write more useful plugins!!

  42. I am forwading this blog post to my friends. Exceptional work!

  43. Mia says:

    This simply ROX ! Just oozing w JQuery Awesumness !
    Kudos to you Alexander ✌

  44. ashwin says:

    Awesome man, i will share it. i havnt seen hover effect like this… o wait why dont you add Sshare buttons on your blog?

    Alexander Wallin Reply:

    Thanks! At the moment, I have sharelinks to Facebook and Twitter right under the main heading.

  45. Ingela says:

    Toppenblogg detta. Skall bokmärkas! :)

  46. Morad says:

    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.

  47. Jerome Bohg says:

    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!

  48. Casp says:

    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 :D

    (pass to see it in about 1 month) if its always in grey color.. its the old style wait a little more ;)

  49. rambojones says:

    Hey, something is wrong with your site in Opera, you should check into it.

  50. moabi says:

    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

    Alexander Wallin Reply:

    Indeed!

  51. Brian says:

    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!

    Alexander Wallin Reply:

    Thanks Brian! Can you figure out which tags are in conflict?

  52. Several of these replies on this post are garbage, You should delete them.

    Alexander Wallin Reply:

    Including yours.

  53. Carolyn says:

    Good information. Lucky me I came across your site by accident (stumbleupon).
    I’ve bookmarked it for later!

  54. Hi to every body, it’s my first go to see of this blog; this web site includes awesome and really excellent material in favor of readers.

  55. Source says:

    I’m not sure where you’re getting your information, but good topic.
    I needs to spend some time learning much more or understanding more.
    Thanks for magnificent information I was looking for this info
    for my mission.

  56. visit says:

    I’ll immediately take hold of your rss feed as I can’t to find your email subscription hyperlink or newsletter service. Do you’ve any? Kindly let me know in order that I may subscribe. Thanks.

  57. news says:

    Hi I am so grateful I found your website, I really found you by error, while I was browsing on
    Yahoo for something else, Nonetheless I am here now and would just like
    to say thanks for a remarkable post and a all round exciting blog (I also love the theme/design), I don’t
    have time to browse it all at the minute but I have
    book-marked it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb b.

  58. Greetings! Very helpftul advice within this post! It’s the little changes that
    make the biggest changes. Many thanks for sharing!

  59. Hello mmy loved one! I wish to say that this post is amazing, nice written
    and come with approximately all important infos. I would like
    to peer more posts like this .

Trackbacks

  1. [...] This post was mentioned on Twitter by Chris Coyier, Ole Martin, Youcef ES-SKOURI, Greg Avola, Webberry | Leiden and others. Webberry | Leiden said: RT: @chriscoyier: HoverAttribute #jQuery – http://bit.ly/b8QeiT [...]

  2. yeah! this story has entered the popular today section on popurls.com…

  3. [...] HoverAttribute jQuery plugin « afEkenholm Web Design [...]

  4. [...] HoverAttribute jQuery plugin « afEkenholm Web Design [...]

  5. [...] 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 tags residing within full-width elements, such as headings or list entries. Amongst several options, it is possible to choose any attribute of a given tag. [...]

  6. [...] HoverAttribute jQuery plugin « afEkenholm Web Design Posted: Monday, May 10th, 2010 @ 1:00 am Tags:api, css, delicious, design, development, django, documentation, effects, facebook, html5, javascript, jquery, json, microformats, plugin, plugins, programming, python, social, standards [...]

  7. [...] HoverAttribute jQuery, un superbe survol de lien qui permet d’apporter une information sur un lien de contenu. [...]

  8. [...] zu machen um ein ausgewogenes Verhältnis zwischen “wow” und überladen zu finden. Das HoverAttribute-Plugin ermöglicht es einem u.a. Links mit einer Animation und zusätzlichen Informationen zu versehen. [...]

  9. [...] Wallin di afehenholm propone una soluzione davvero originale, sfruttando il framework [...]

  10. [...] ce site http://www.afekenholm.se/hoverattribute-jquery-plugin/ il est expliqué une technique pour dynamiser vos liens. Cet effet m’a plus : lorsque [...]

  11. [...] ask jConfirmAction to create a confirmation box and that’s it you have a cute confirmation box. HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of [...]

  12. [...] HoverAttribute jQuery plugin. "allows you to make (link-)elements more dynamic by making an attribute of that element show [...]

  13. [...] options, it is possible to choose any attribute (href by default, see Usage) of a given tag.via HoverAttribute jQuery plugin – afEkenholm Web Design. Really cool jQuery plugin, used it for a project at work where a tooltip was not the desired tool [...]

  14. [...] HoverAttribute jQuery plugin « afEkenholm Web Design [...]

  15. [...] HoverAttribute jQuery plugin « afEkenholm Web Design [...]

  16. [...] 原教學:HoverAttribute jQuery plugin – afEkenholm Web Design [...]

  17. [...] 13. HoverAttribute [...]

  18. [...] Demostration and Documentation Demo and Documentation Page [...]

  19. [...] Hover Attribute es un plugin de jQuery que brinda un poco más de interacción a nuestros enlaces de texto. Esto lo logra mediante el intercambio dinámico y animado del texto por alguno de los parámetros contenidos dentro de la etiqueta del enlace, por defecto utiliza el titulo pero esto se puede configurar, por ejemplo para que utilice el destino del mismo. [...]

  20. [...] HoverAttribute jQuery plugin « afEkenholm Web Design (tags: jquery hover plugin) [...]

  21. [...] Per vedere il reale funzionamento di HoverAttribute e per scaricarne tutti i file vi rimando al link originale dell’autore Alexander Wallin. [...]

  22. [...] davvero interessante e utile sfruttando proprio questo evento. Si chiama hover Attribute e trovate qui la pagina ufficiale. In pratica, il plugin, come é intuibile dall’immagine introduttiva, non fa [...]

  23. [...] Mais informações podem ser consultada no site oficial do plugin [...]

  24. [...] The site has major AJAX features in the form of jQuery scripts and plugins, of which 1 is written by me. [...]

  25. [...] 观看演示 | 下载插件 [...]

Leave a Reply