Truncate String And Display Full Text On Hover - Hover Truncated

Hover Truncated is a responsive jQuery text truncation plugin for shortening long text content and replacing the hidden overflow content with an ellipsis.

In addition, users can view the original text in a tooltip box to provide a better experience by hovering over the truncated text. 

How to use it:

1. Download the plugin and insert the JavaScript file jquery.hovertruncated.js after loading jQuery.

<link rel="stylesheet" href="/path/to/jquery.hovertruncated.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.hovertruncated.js"></script>

2. Call the function hoverTruncated on the container element whose text should be truncated. That's it.

<ul class="container">
  <li class="title truncate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo nibh,
    cursus ut semper a, faucibus nec magna. Nulla pharetra ultricies pulvinar.
  </li>
  <li class="title truncate">
    Nam fermentum cursus dapibus. Vivamus tristique nulla id condimentum
    feugiat. Sed consectetur velit sit amet libero tempor gravida.
  </li>
  <li class="title truncate">
    Curabitur scelerisque sodales justo, in tempus velit cursus eu.
    Donec ut nisi volutpat, vehicula purus id, consequat ligula.
    Suspendisse et augue dignissim, rhoncus odio in, pulvinar sapien.
  </li>
</ul>

$(function(){
  $('.truncate').hoverTruncated();
});

3. Possible plugin options.

$('.truncate').hoverTruncated({

  // default data attribute for the truncated text
  dataAttr: 'hover-truncated',

  // default CSS class for the truncated text
  className: 'hover-truncated',

  // shows custom text on hover
  tooltipText: null,

  // tooltip offset
  offsetX: 10,
  offsetY: 10
  
});

4. API methods.

// hide the tooltip
$('.truncate').hoverTruncated('hide');

// show the tooltip
$('.truncate').hoverTruncated('show'); 

// update the tooltip content
$('.truncate').hoverTruncated('update', 'jQueryScript!');

// destroy the instance
$('.truncate').hoverTruncated('destroy');   

---

This awesome jQuery plugin is developed by lyushenko. For more Advanced Usages, please check the demo page or visit the official website.