This is a simple jQuery plugin that truncates text to a single line clipped with an ellipsis and displays a tooltip on hover.
WARNING: this repo is not maintained anymore.
- Run
bower install jquery-hover-truncated - Copy styles to your stylesheet or just link an external file in your
<head>:
<link rel="stylesheet" type="text/css" href="path/to/jquery.hovertruncated.css">
- Then, before your closing
<body>tag add:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.hovertruncated.js"></script>
- In your JS, initialize a plugin:
$(function(){
$('.truncate').hoverTruncated();
});
Or configure it like the following:
$(function(){
var options = {
dataAttr: 'plugin-cache', // data attribute to store an instance, default: 'hover-truncated'
className: 'tooltip-plain', // tooltip class name, default: 'hover-truncated'
tooltipText: 'Hello, World!', // tooltip text, default: element inner text
offsetX: 0, // tooltip offset-x, default: 10px
offsetY: 0 // tooltip offset-y, default: 10px
};
$('.truncate').hoverTruncated(options);
});
- Then you can call a plugin method:
$(function(){
$('.truncate').hoverTruncated('hide'); // hides an element's tooltip
$('.truncate').hoverTruncated('show'); // reveals an element's tooltip
$('.truncate').hoverTruncated('update', 'Goodbye, cruel world!'); // updates an element's tooltip content
$('.truncate').hoverTruncated('destroy'); // hides and destroys an element's tooltip
});
This plugin is released under the MIT license.