Fork me on GitHub

trunKit: "…" to full text on hover

trunKit is a simple jQuery plugin that does two things:
  1. Remove words from the end of the content of a fixed-height div until the remaining content plus … fits
  2. Add a div inside the displayed div (inheriting most of the css characteristics) that appears on hover with the full content

download

usage

<link rel="stylesheet" type="text/css" href="trunKit.css" />
<script src="trunKit.js"></script>

<script>
$(document).ready(function(){
	$(".captionDiv").trunKit();
});
</script>
By default, the class "trunKit" will be used for the hover overlay. This can be overridden with a parameter. The default trunKit CSS class is:
.trunKit{
	position:absolute;
	left:-4px;
	top:-4px;
	background-color:white;
	border:2px dashed #999999;
	padding:2px;	
	z-index:100;
}
which creates a white overlay with a dashed board.

The div being styled should have a set height.

parameters

the $.trunKit() function takes an optional set of parameters:
hoverClass
Class used for both the hover selector and the visual display of the full text overlay. (defaults to "trunKit")
durationFadeIn
Standard jQuery duration parameter, in ms, for fadeIn() of overlay. (defaults to 200)
durationFadeOut
Standard jQuery duration parameter, in ms, for fadeIn() of overlay. (defaults to 200)

example

This is the first example that I am placing here
My second example is not much different from the first
but by placing three examples, we will experiment with different colors.
But this is short.