Features

  • Two handy modes: Scroll-To-End (above) and Looping (right)
  • Requires jQuery or Zepto.
  • Lightweight: Less than 2k when minified+gzipped
  • Uses CSS3 animations & transitions, with GPU acceleration where available
  • Supports all modern browsers: Chrome, Firefox, Safari, IE10, iOS, & Android
  • Degrades gracefully on IE7-IE9
  • MIT Licensed

Known Bugs

  • Does not support traversal; use $(".items li").hoverForMore(), not $(".items").find("li").hoverForMore();
  • Does not yet support pre-WebKit Opera

Coming Soon

  • Full support on IE7-9
  • Configurable snapback speed
  • You tell me!

Looping Example

Give Me Convenience or Give Me Death

Usage

<!-- HTML -->
<div style="width: 100px;">
	<div class="overflowing">
		Lorem ipsum dolor sit amet, consectetur adipiscing.
	</div>
</div>
/* CSS */
.overflowing {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

// Javascript
$(".overflowing").hoverForMore({
	speed: 60.0,		// Measured in pixels-per-second
	loop: true,		// Scroll to the end and stop, or loop continuously?
	gap: 20,		// When looping, insert this many pixels of blank space
	target: false,		// Hover on this CSS selector instead of the text line itself
	removeTitle: true,	// By default, remove the title attribute, as a tooltip is redundant
	snapback: true,		// Animate when de-activating, as opposed to instantly reverting
	addStyles: true,	// Auto-add CSS; leave this on unless you need to override default styles
	alwaysOn: false,	// If you're insane, you can turn this into a <marquee> tag. (Please don't.)

	// In case you want to alter the events which activate and de-activate the effect:
	startEvent: "mouseenter",
	stopEvent: "mouseleave"
});

Fervently Asked Questions

Q: Do I need to add any CSS of my own for this to work?

A: Technically, no. Target a block element with too much text to fit within its parent, and this plugin does the rest.

However, to prevent a Flash of Unstyled Content and support users without Javascript, it is strongly recommended you also add the three CSS rules displayed above.

Q: I'm seeing a visual flicker when hovering on items in Chrome/Safari.

A: That's not a question. But it's a known issue with GPU accelerated CSS3 on WebKit.

You can correct this by adding -webkit-transform: translateZ(0); to the <body>. If that doesn't work, try adding -webkit-transform-style: preserve-3d; or -webkit-transform-style: flat; to the affected items.

Q: Shouldn't you just design your layout around your content, thus making this plugin unnecessary?

A: Yes. No. Shut up. Hey, what's that behind you? ...No, the other behind you.

Version History

v1.2.1

  • Small fixes to title hover fallback

v1.2

  • Mobile fixes

v1.1

  • Attaching hover target to arbitrary CSS selector
  • Firefox bug fixes

v1.0

  • Initial release into the wild
  • Documentation and examples