Submit your widget

HoverAttribute jQuery plugin

Created 13 years ago   Views 10648   downloads 2114    Author afekenholm
HoverAttribute jQuery plugin
View DemoDownload
Share |

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

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

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"


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",


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",


The HoverAttribute plugin takes some options as follows:

   attribute: "href",
   animationTime: 0.3,
   animationEase: "linear",
   tweenInFrom: "left",
   parseAsURL: null,
   removeProtocol: true,
   removeWWW: false,
   wrapLink: "after",
   wrapLength: 60,
   highlightURLPart: "host",
   cssSettings: {
      canExpandFullWidth: true



A string that sets which attribute to show on hovering. Any existing attribute may be used. The default is set to "href".


Time time in seconds that the animation on hover should last. Default is set to 0.3.


The jQuery easing function that the animation will use.

"swing" (Default)


The side from which the attribute will be animated into position.

"left" (Default)


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)


Whether to remove “http(s)://”, “ftp://” or “mailto:” in the selected attribute, if this is a URL.

false (Default)


Whether to include “www.” in the selected attribute if this is a URL.

false (Default)


A string indicating if and where to wrap the attribute’s text.

"after" (Default)


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


A string that instructs which part of the URL (if the string is a URL) to highlight.

"host" or "domain" (Default)


A set of properties to correct and/or control the appearance of the chosen element.


Sets whether or not the chosen element can be expanded to 100% width within it’s parent element when hovered.

true (Default)